如何在material-react-table中初始隐藏「显示/隐藏列」按钮？

你可以根据需求选择以下方式实现：

1. 全局禁用列隐藏功能（直接隐藏按钮） #

如果不需要用户进行列隐藏操作，直接在表格配置中添加enableColumnHiding={false}，对应的按钮就不会被渲染：

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

const MyTable = () => {
  return (
    <MaterialReactTable
      columns={yourColumnsData}
      data={yourTableData}
      enableColumnHiding={false} // 隐藏显示/隐藏列按钮
    />
  );
};

2. 自定义工具栏，仅移除该按钮 #

如果需要保留列隐藏能力（比如通过其他逻辑触发），但不想显示按钮，可以自定义顶部工具栏组件，不包含列隐藏按钮：

import { MaterialReactTable, useMaterialReactTable } from 'material-react-table';
import { Toolbar, Box } from '@mui/material';

const MyTable = () => {
  const table = useMaterialReactTable({
    columns: yourColumnsData,
    data: yourTableData,
    enableColumnHiding: true, // 保留列隐藏功能
    renderTopToolbar: ({ table }) => (
      <Toolbar>
        {/* 这里只保留你需要的工具栏元素，比如搜索框、导出按钮等 */}
        <Box sx={{ flex: 1 }} />
        {/* 可添加其他自定义工具栏组件 */}
      </Toolbar>
    ),
  });

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

3. 隐藏单个列的显示/隐藏选项 #

如果只是不想让某列出现在显示/隐藏面板中，可在对应列的配置里设置enableHiding={false}：

const yourColumnsData = [
  {
    accessorKey: 'id',
    header: 'ID',
    enableHiding: false, // 该列不会出现在显示/隐藏面板
  },
  // 其他列配置...
];

内容的提问来源于stack exchange，提问作者Mohamed El Hammi