如何隐藏React Material Table的全部表格选项实现极简样式？

问题背景 #

在React项目中使用material-react-table构建表格时，表格整体占用空间过大，其中右上角的操作按钮（导出、列选择、设置等）是主要的空间占用来源，需要将表格调整为极简风格，首先移除这些按钮。

实现步骤 #

1. 通过组件props直接禁用不需要的按钮 #

material-react-table提供了精准的配置props，无需手动修改CSS即可控制功能按钮的显隐，更可靠易维护：

• enableExport={false}：禁用导出按钮
• enableColumnSelector={false}：禁用列选择器按钮
• enableSettings={false}：禁用表格设置按钮
• enableFullScreenToggle={false}：禁用全屏切换按钮
• 若想直接隐藏整个顶部工具栏（会同时隐藏左侧搜索框等内容），可使用enableTopToolbar={false}

2. 修改后的完整代码示例 #

import React, { useMemo } from 'react';
import MaterialReactTable, { type MRT_ColumnDef } from 'material-react-table';
import { data, type Person } from './makeData';

const Example = () => {
  const columns = useMemo<MRT_ColumnDef<Person>[]>(
    () => [
      {
        accessorKey: 'firstName',
        header: 'First Name',
      },
      {
        accessorKey: 'lastName',
        header: 'Last Name',
      },
      {
        accessorKey: 'address',
        header: 'Address',
      },
      {
        accessorKey: 'city',
        header: 'City',
      },
      {
        accessorKey: 'state',
        header: 'State',
      },
    ],
    [],
  );

  return (
    <MaterialReactTable
      columns={columns}
      data={data}
      enableRowNumbers
      rowNumberMode="static"
      // 添加配置禁用右上角按钮
      enableExport={false}
      enableColumnSelector={false}
      enableSettings={false}
      enableFullScreenToggle={false}
    />
  );
};

export default Example;

3. 额外极简样式优化（可选） #

若需进一步压缩空间，可通过自定义CSS调整表格内边距、行高：

/* 减小表头和单元格内边距 */
.mrt-table-header-cell,
.mrt-table-cell {
  padding: 8px 12px !important;
}

/* 降低行高 */
.mrt-table-row {
  height: 40px !important;
}

/* 移除表格边框（按需选择） */
.mrt-table {
  border-collapse: collapse;
}
.mrt-table-header,
.mrt-table-row {
  border: none !important;
}

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