Material Table React：实现「应用至全部」与「应用至分组」功能需求

实现方案 #

通过React状态管理结合Material Table的内置回调，可完成需求中的批量同步与按钮互斥逻辑，具体实现如下：

完整代码示例 #

import React, { useState } from 'react';
import MaterialTable from 'material-table';

function ConditionalActions() {
  // 初始化表格数据，使用state管理以便修改
  const [tableData, setTableData] = useState([
    { name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 },
    { name: 'Zerya Betül', surname: 'Baran', birthYear: 2017, birthCity: 34 },
  ]);
  // 记录当前分组的列，用于控制按钮显示
  const [groupedColumns, setGroupedColumns] = useState([]);
  // 记录最新编辑完成的行数据，用于批量同步
  const [updatedRow, setUpdatedRow] = useState(null);

  return (
    <MaterialTable
      title="Conditional Actions Preview"
      columns={[
        { title: 'Name', field: 'name' },
        { title: 'Surname', field: 'surname' },
        { title: 'Birth Year', field: 'birthYear', type: 'numeric' },
        {
          title: 'Birth Place',
          field: 'birthCity',
          lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' },
        },
      ]}
      options={{
        grouping: true,
      }}
      data={tableData}
      // 启用行编辑功能
      editable={{
        onRowUpdate: (newData, oldData) =>
          new Promise((resolve) => {
            setTimeout(() => {
              resolve();
              // 更新表格数据
              const updatedData = [...tableData];
              const index = updatedData.indexOf(oldData);
              updatedData[index] = newData;
              setTableData(updatedData);
              // 保存最新编辑的行数据
              setUpdatedRow(newData);
            }, 600);
          }),
      }}
      // 监听分组变化，更新分组列状态
      onGroupChange={(columns) => {
        setGroupedColumns(columns);
      }}
      actions={[
        {
          icon: 'save',
          tooltip: 'Save User',
          onClick: (event, rowData) => alert("You saved " + rowData.name)
        },
        rowData => ({
          icon: 'delete',
          tooltip: 'Delete User',
          onClick: (event, rowData) => confirm("You want to delete " + rowData.name),
          disabled: rowData.birthYear < 2000
        }),
        // 应用至全部按钮：仅当无分组时显示
        ...(!groupedColumns.length ? [{
          icon: 'content-copy',
          tooltip: '应用至全部',
          onClick: () => {
            if (!updatedRow) return alert('请先编辑任意一行数据');
            // 将最新编辑行的数据同步至所有行
            const newData = tableData.map(row => ({
              ...row,
              ...updatedRow
            }));
            setTableData(newData);
          }
        }] : []),
        // 应用至分组按钮：仅当有分组时显示
        ...(groupedColumns.length ? [{
          icon: 'group_work',
          tooltip: '应用至分组',
          onClick: (event, rowData) => {
            if (!updatedRow) return alert('请先编辑任意一行数据');
            // 获取当前分组的字段名
            const groupField = groupedColumns[0].field;
            // 筛选出同组的所有行并同步数据
            const newData = tableData.map(row => {
              if (row[groupField] === rowData[groupField]) {
                return { ...row, ...updatedRow };
              }
              return row;
            });
            setTableData(newData);
          }
        }] : [])
      ]}
    />
  )
}

export default ConditionalActions;

关键逻辑说明 #

1. 状态管理：

   • tableData：维护表格的所有数据，确保可修改
   • groupedColumns：记录当前分组的列信息，用于判断按钮显示逻辑
   • updatedRow：保存用户最新编辑完成的行数据，作为批量同步的数据源

2. 按钮互斥显示：
   通过groupedColumns.length判断是否存在分组，利用数组展开语法...动态添加对应按钮，实现互斥显示效果。

3. 应用至全部：
   遍历所有数据行，将updatedRow的字段值覆盖到每一行，完成全量同步。

4. 应用至分组：
   获取当前分组的字段名，匹配点击行的分组值，筛选出同组数据并同步updatedRow的内容。

5. 编辑状态监听：
   通过editable.onRowUpdate回调，在用户完成行编辑后更新表格数据，并记录最新的编辑行。

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