如何移除或隐藏MUI DataTable中的工具栏？

下面是几种实用的实现方式，按需选择即可：

• 直接通过配置项隐藏完整工具栏
  MUI DataTables提供了直接控制工具栏显示的配置，在options里设置toolbar: false就能一键隐藏整个工具栏（包括右上角的操作按钮）：

  import MUIDataTable from "mui-datatables";
  
  const columns = ["Name", "Company", "City", "State"];
  const data = [
    ["Joe James", "Test Corp", "Yonkers", "NY"],
    ["John Walsh", "Test Corp", "Hartford", "CT"],
  ];
  
  const options = {
    toolbar: false, // 隐藏整个工具栏
  };
  
  export default function App() {
    return (
      <MUIDataTable 
        title={"Employee List"} 
        data={data} 
        columns={columns} 
        options={options} 
      />
    );
  }
  

• 自定义工具栏（精准隐藏右上角区域）
  如果只想隐藏右上角的导出、搜索等操作按钮，保留表格标题或其他元素，可以通过customToolbar自定义工具栏内容，只返回你需要保留的部分：

  const options = {
    customToolbar: () => {
      // 这里可以返回自定义内容，比如仅保留标题容器，或直接返回空组件隐藏全部
      return <div></div>;
    },
  };
  

• CSS样式强制隐藏
  要是配置方式不适用，也可以用CSS定位右上角的操作区域进行隐藏：

  .MuiDataTable-toolbar-actions {
    display: none !important;
  }
  

  注意：使用时要确保CSS选择器的优先级足够，避免被组件默认样式覆盖。

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