Material Table重写添加行功能：如何在可编辑添加行UI打开前执行函数

实现方案 #

你可以通过自定义添加操作按钮的方式，在触发打开添加行UI之前插入你的自定义逻辑，具体实现如下：

步骤1：声明Material Table实例引用 #

在你的组件内先创建ref，用于调用表格内置的添加行方法：

import { useRef } from 'react';

const tableRef = useRef();

步骤2：调整Material Table配置 #

替换默认的添加行按钮，自定义点击逻辑，完整代码示例：

<MaterialTable
  ref={tableRef}
  title="Timesheet"
  columns={columns}
  data={DataArray}
  icons={tableIcons}
  // 自定义全局操作，替换默认添加按钮
  actions={[
    {
      icon: tableIcons.Add,
      tooltip: '添加行',
      isFreeAction: true,
      onClick: (event) => {
        // 此处先执行你的自定义逻辑
        console.log('Hello');
        // 自定义逻辑执行完成后，调用内置方法打开添加行UI
        tableRef.current.dataManager.addRow();
      }
    }
  ]}
  editable={{
    onRowAddCancelled: rowData => console.log('Row adding cancelled'),
    onRowUpdateCancelled: rowData => console.log('Row editing cancelled'),
    onRowAdd: newData =>
      new Promise((resolve, reject) => {
        setTimeout(() => {
          // 保留你原有添加行的业务逻辑
          resolve();
        }, 1000);
      }),    
  }}
  options={{
    actionsColumnIndex: -1,
    addRowPosition: "first",
    search:false,
    exportButton: true,
    // 关闭默认的添加按钮，避免出现重复按钮
    editable: {
      addRow: false
    }
  }}
/>

异步逻辑适配 #

如果你的自定义逻辑是异步操作（比如接口请求、前置校验），调整点击事件为异步写法即可：

onClick: async (event) => {
  // 执行异步自定义逻辑
  await yourCustomAsyncFunction();
  // 逻辑完成后再打开添加行UI
  tableRef.current.dataManager.addRow();
}

内容的提问来源于stack exchange，提问作者user16985442