如何自定义material-react-table v2的显示/隐藏（固定）列菜单

需求 #

• 在显示/隐藏（固定）列菜单的末尾添加自定义按钮
• 使用版本：material-react-table v2
• 已尝试：查阅官方文档未找到对应方案

解决方案 #

material-react-table v2支持通过全局或列级别的renderColumnActionsMenuItems回调扩展列菜单，直接在默认菜单项末尾追加自定义内容即可。

全局自定义（所有列菜单生效） #

import { useMaterialReactTable, MaterialReactTable } from 'material-react-table';
import { MenuItem, Button, Divider } from '@mui/material';

const columns = [
  // 示例列定义
  { accessorKey: 'id', header: 'ID' },
  { accessorKey: 'name', header: '名称' },
  { accessorKey: 'email', header: '邮箱' },
];

const data = [
  // 你的表格数据
];

const CustomTable = () => {
  const table = useMaterialReactTable({
    columns,
    data,
    // 扩展列菜单
    renderColumnActionsMenuItems: ({ defaultItems }) => [
      ...defaultItems, // 保留原有显示/隐藏列等默认菜单项
      <Divider key="menu-divider" />, // 添加分隔线区分默认项与自定义项
      // 自定义菜单项
      <MenuItem 
        key="reset-columns" 
        onClick={() => table.toggleAllColumnsVisible(true)}
      >
        重置所有列显示
      </MenuItem>,
      // 自定义按钮组件
      <Button 
        key="custom-action-btn" 
        fullWidth 
        variant="contained" 
        onClick={() => {
          // 自定义逻辑示例
          console.log('自定义按钮触发');
        }}
      >
        执行自定义操作
      </Button>,
    ],
  });

  return <MaterialReactTable table={table} />;
};

export default CustomTable;

列级别自定义（仅指定列菜单生效） #

如果只需给某一列的菜单添加自定义按钮，在对应列的定义中配置renderColumnActionsMenuItems即可：

const columns = [
  {
    accessorKey: 'name',
    header: '名称',
    // 仅此列菜单生效的自定义配置
    renderColumnActionsMenuItems: ({ defaultItems }) => [
      ...defaultItems,
      <Divider key="col-divider" />,
      <MenuItem 
        key="col-custom-item" 
        onClick={() => console.log('针对名称列的自定义操作')}
      >
        名称列专属操作
      </MenuItem>,
    ],
  },
  // 其他列定义
];

说明 #

该API是material-react-table v2官方支持的扩展能力，可在文档的「Column Actions Menu」或「Customization」章节找到相关说明。

内容的提问来源于stack exchange，提问作者Aryak singh chauhan