如何覆盖反应材料表的操作按钮

Question

I'm using material-table in the project we are working on. I need to override the Add button (+ button) and edit button of material-table (marked in the sample image attached), instead of inline adding/editing feature of material-table I want to have a Dialog box (my customized component) should popup in which users will enter their data, then on clicking save button an API call will be performed.

Is there a way to do it? Can I use EditRow props of Materialtable? If yes can someone give a small example of it on how to use EditRow?

Answer 1

I solved this with the following solution given by a Material-Table contributor Matt Oestreich. I had to use Actions property with my custom onClick handler for custom edit and similarly for Adding set isFreeAction to true in actions prop.

sample code box demo For custom edit operation pass the actions properties like below:

<MaterialTable
  // other props
  actions={[
    {
      icon: 'edit',
      tooltip: 'Edit Row',
      onClick: (event, rowData) => {
        // Code to display custom Dialog here
      }
    }
  ]}
/>

For custom add operation pass the actions properties along with isFreeAction prop:

<MaterialTable
  // other props
  actions={[
    {
      icon: 'add',
      tooltip: 'Add Row',
      // This makes add button to appear in table toolbar instead for each row
      isFreeAction: true 
      onClick: (event, rowData) => {
        // Code to display custom Dialog here
      }
    }
  ]}
/>

my final code would look something like this:

<MaterialTable
  // other props
  actions={[
    {
      icon: 'edit',
      tooltip: 'Edit Row',
      onClick: (event, rowData) => {
        // Code to display custom Dialog here
      }
    },
    {
      icon: 'add',
      tooltip: 'Add Row',
      // This makes add button to appear in table toolbar instead for each row
      isFreeAction: true 
      onClick: (event, rowData) => {
        // Code to display custom Dialog here
      }
    },
  ]}
/>