MaterialReactTable V2自定义编辑模式下渲染表单及更新数据求助

一、Custom模式下渲染自定义编辑表单 #

设置editDisplayMode: 'custom'后，MRT不会自动渲染内置编辑组件，需手动结合MRT的编辑状态控制自定义组件的显示逻辑：

1. 获取表格实例引用：通过useRef拿到MRT实例，用于后续控制编辑状态
2. 触发自定义编辑流程：通过行内编辑按钮、顶部新增按钮等触发自定义模态框，同时同步MRT的编辑状态
3. 传递表单初始数据：根据editingRow（编辑现有行）或creatingRow（新增行）状态，将对应数据传入自定义表单

示例代码：

import { useRef, useState } from 'react';
import MaterialReactTable from 'material-react-table';
import YourCustomModal from './YourCustomModal'; // 你的自定义模态组件

const YourTable = () => {
  const tableRef = useRef(null);
  const [showCustomModal, setShowCustomModal] = useState(false);
  const [formData, setFormData] = useState({});

  // 处理行编辑按钮点击
  const handleEditRow = (row) => {
    setFormData(row.original);
    setShowCustomModal(true);
    tableRef.current?.setEditingRow(row);
  };

  // 处理新增按钮点击
  const handleCreateRow = () => {
    setFormData({});
    setShowCustomModal(true);
    tableRef.current?.setCreatingRow(true);
  };

  return (
    <>
      <MaterialReactTable
        ref={tableRef}
        columns={yourColumns} // 你的列配置
        data={yourData} // 表格数据源
        editDisplayMode="custom"
        enableRowActions
        renderRowActions={({ row }) => (
          <button onClick={() => handleEditRow(row)}>编辑</button>
        )}
        // 自定义顶部工具栏添加新增按钮
        renderTopToolbarCustomActions={() => (
          <button onClick={handleCreateRow}>新增</button>
        )}
      />

      {/* 自定义模态框 */}
      <YourCustomModal
        open={showCustomModal}
        onClose={() => {
          setShowCustomModal(false);
          tableRef.current?.setEditingRow(null);
          tableRef.current?.setCreatingRow(false);
        }}
        formData={formData}
        onSubmit={async (submittedData) => {
          // 执行新增/编辑API请求
          await yourApiRequest(submittedData);
          // 关闭模态框并重置编辑状态
          setShowCustomModal(false);
          tableRef.current?.setEditingRow(null);
          tableRef.current?.setCreatingRow(false);
          // 刷新表格数据（见下文）
        }}
      />
    </>
  );
};

二、编辑完成后刷新MRT数据 #

编辑或新增操作完成后，可通过两种方式通知表格更新数据：

1. 重新拉取数据源：如果数据来自后端API，直接重新调用数据获取函数，更新表格的data状态即可，MRT会自动重新渲染

// 假设用useState管理表格数据
const [yourData, setYourData] = useState([]);

const fetchTableData = async () => {
  const res = await fetch('/api/your-data');
  const data = await res.json();
  setYourData(data);
};

// 表单提交成功后调用
await yourApiRequest(submittedData);
fetchTableData();

2. 调用MRT内置刷新方法：如果数据已在本地更新，可直接调用表格实例的refresh方法触发表格刷新

tableRef.current?.refresh();

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