0

In material-table row can be added by clicking on + icon on top right corner. I want to replace that icon with text like "ADD ROW". But material-table accept the icon object and there is not other prop to do it. Is there any way I can do it? I am using material-table editable feature https://material-table.com/#/docs/features/editable

I tried few things like

1) extracting the style class from inspect element and changing it but it effects all other icons. There is no particular class just for add icon.

2) I tried to extend the class of material-table into my component and changing the back-end code but that also didn't worked.

Material table Image

Kashan Siddiqui
  • 27
  • 2
  • 6

1 Answers1

3

Material table simply renders whatever gets returned in the icon prop for each key.

You can simply use the icons prop like this:

icons={{Add: () => 'Add Row'}}

This will render 'Add Row' in the place of the icon.

halfer
  • 19,824
  • 17
  • 99
  • 186
Domino987
  • 8,475
  • 2
  • 15
  • 38
  • @Domino987, any idea how to get the add icon to appear on the top-left rather than the top-right of the table? – twgardner2 Dec 14 '19 at 16:32
  • 1
    @twgardner2 Like next to the title? You would need to override the header component and implement that yourself. – Domino987 Dec 14 '19 at 18:51
  • @Domino987, yes, I have a wide table and I don't want to scroll over to the '+' icon, so I'm looking to move it over near the title. Overriding the header makes sense, thank you. – twgardner2 Dec 14 '19 at 22:03
  • You can use `options={{ toolbarButtonAlignment: 'left', searchFieldAlignment: 'left' }}` – Aamir Afridi May 08 '20 at 01:06