Material React Table批量更新：仅启用选中行编辑的技术问题

要实现仅让选中行进入表格内编辑状态，核心是通过精细化控制每行的可编辑权限，结合批量编辑状态和选中行ID列表来实现，具体步骤如下：

1. 维护必要的组件状态 #

在表格组件中添加两个关键状态：记录选中行ID的列表，以及标记是否处于批量编辑模式的开关：

import { useState } from 'react';
import MaterialReactTable from 'material-react-table';

const YourTable = () => {
  // 记录选中行的ID
  const [selectedRowIds, setSelectedRowIds] = useState<string[]>([]);
  // 标记是否进入批量编辑模式
  const [isBulkEditing, setIsBulkEditing] = useState(false);
  // 表格数据源
  const [tableData, setTableData] = useState([]);

2. 配置表格的行选择功能 #

开启行选择，并将选中行的ID同步到状态中：

<MaterialReactTable
  columns={columnsConfig}
  data={tableData}
  editingMode="table" // 保留表格内在线编辑模式
  enableEditing={true} // 全局开启编辑能力，后续精细化控制每行权限
  enableRowSelection={true}
  onRowSelectionChange={({ selectedRowIds }) => setSelectedRowIds(selectedRowIds)}
  // 其他表格基础配置

3. 控制列的可编辑权限 #

在列配置中，针对需要编辑的列，通过editable属性添加判断逻辑：只有处于批量编辑模式且当前行ID在选中列表中时，才允许编辑：

const columnsConfig = [
  // 示例：不可编辑的ID列
  {
    accessorKey: 'id',
    header: 'ID',
    editable: false,
  },
  // 示例：仅批量编辑时选中行可编辑的列
  {
    accessorKey: 'productName',
    header: '产品名称',
    editable: ({ row }) => isBulkEditing && selectedRowIds.includes(row.id),
  },
  // 其他需要编辑的列，均按此逻辑配置editable属性
];

4. 实现批量编辑按钮的交互逻辑 #

添加批量更新按钮，点击时切换批量编辑模式，同时处理边界情况（比如未选中行时的提示）：

<div style={{ marginBottom: '16px' }}>
  <button
    onClick={() => {
      if (isBulkEditing) {
        // 退出批量编辑时：调用API保存修改，重置状态
        submitBulkUpdates();
        setIsBulkEditing(false);
        setSelectedRowIds([]);
      } else {
        // 进入批量编辑前检查是否选中行
        if (selectedRowIds.length === 0) {
          alert('请先选择需要编辑的行');
          return;
        }
        setIsBulkEditing(true);
      }
    }}
  >
    {isBulkEditing ? '取消批量编辑' : '批量更新'}
  </button>
</div>

补充说明 #

• submitBulkUpdates函数需要你根据实际API逻辑实现，比如收集选中行的修改数据，调用批量更新接口。
• 如果行ID不是字符串类型，需要对应调整selectedRowIds的类型和判断逻辑。
• 这种方式既保留了editingMode="table"的在线编辑体验，又精准控制了仅选中行可编辑的需求。

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