如何覆盖反应物料表的“操作”按钮

Question

我正在使用的项目中使用material-table。我需要覆盖材质表的“添加”按钮（+按钮）和“编辑”按钮（在随附的示例图像中标记），而不是材质表的内联添加/编辑功能，我想要一个对话框（我的自定义组件）应该会弹出一个窗口，用户将在其中输入数据，然后单击“保存”按钮，将执行API调用。

有办法吗？我可以使用Materialtable的EditRow道具吗？如果是，有人可以举一个有关如何使用EditRow的小例子吗？

Answer 1

我通过材料表贡献者Matt Oestreich提供的以下解决方案解决了这个问题。我必须将Actions属性与我的自定义onClick处理程序结合使用以进行自定义编辑，并且类似地，还需要在action prop中将set isFreeAction添加为true。

sample code box demo 对于自定义编辑操作，请通过以下操作属性：

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

对于自定义添加操作，请将actions属性与isFreeAction属性一起传递：

<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
      }
    }
  ]}
/>

我的最终代码如下：

<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
      }
    },
  ]}
/>