How to edit the icons and properties of the edit and remove buttons on the editable Material-table?

Question

I am using material-table with editable. When I add "onRowUpdate" and "onRowDelete" the buttons appear with standard icons, I want to change the icon of the trash can, space them apart and change their size but can't seem to find out how.

I am declaring it like this:

const editable = {
  onRowUpdate: async (updateRow) => {
    put(endpoint, {companyName: updateRow.companyName, id: updateRow.id}, auth.token, dispatch)
  },
  onRowDelete:async (deleteRow) => {
    del(endpoint, {id: deleteRow.id}, auth.token, dispatch)
  }
}

Found an answer: https://stackoverflow.com/questions/67159866/how-can-i-change-the-color-of-material-table-icons-of-onrowadd-onrowupdate-onr — Renato Migliorini, Mar 17 '22 at 13:57

score 0 · Answer 1 · edited Mar 20 '22 at 01:42

0

Give the edit icon a class name, Eg: className='addSpaceRight' Now add CSS as below:

.addSpaceRight{
  padding-right: 20px; //pixels as per your need
}

edited Mar 20 '22 at 01:42

Moritz Jasper

825
11
19

answered Mar 17 '22 at 12:09

Ponprabhakar S

1
1

How to edit the icons and properties of the edit and remove buttons on the editable Material-table?

1 Answers1