跳到主要内容
+

数据表格 - 列可见性

定义哪些列是可见的。

默认情况下，所有列都是可见的。可以通过两种用户界面方式切换列的可见性

  • 通过打开列菜单并点击隐藏菜单项。
  • 通过点击列菜单并切换列的显示或隐藏。

您可以通过在 GridColDef 中将 hideable 设置为 false 来阻止用户通过用户界面隐藏列。

在以下演示中，“username”列无法被隐藏。

按 Enter 开始编辑

初始化可见列

要在不控制可见列的情况下初始化它们，请将模型提供给 initialState 属性。

<DataGrid
  initialState={{
    columns: {
      columnVisibilityModel: {
        // Hide columns status and traderName, the other columns will remain visible
        status: false,
        traderName: false,
      },
    },
  }}
/>

受控的可见列

使用 columnVisibilityModel 属性来控制可见列。您可以使用 onColumnVisibilityModelChange 属性来监听可见列的变化并相应地更新属性。

<DataGrid
  columnVisibilityModel={{
    // Hide columns status and traderName, the other columns will remain visible
    status: false,
    traderName: false,
  }}
/>
按 Enter 开始编辑

列可见性面板

列可见性面板允许用户控制 Data Grid 中哪些列是可见的。

面板可以通过以下方式打开

按 Enter 开始编辑

禁用列可见性面板

有时，目的是禁用列面板或根据应用程序状态以编程方式控制可见列。要禁用列可见性面板，请设置 disableColumnSelector={true} 属性并使用 columnVisibilityModel 属性来控制可见列。

<DataGrid disableColumnSelector columnVisibilityModel={columnVisibilityModel} />

在以下演示中，列面板被禁用，并且只有 Admin 类型用户可以访问 id、quantity 和 filledQuantity 列。

自定义列管理中列的列表

要在列可见性面板中显示或隐藏特定列，请使用 slotProps.columnsManagement.getTogglableColumns 属性。它应该返回一个列字段名称数组。

import {
  DataGridPremium,
  GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD,
} from '@mui/x-data-grid-premium';

// stop `id`, GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD, and `status` columns to be togglable
const hiddenFields = ['id', GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD, 'status'];

const getTogglableColumns = (columns: GridColDef[]) => {
  return columns
    .filter((column) => !hiddenFields.includes(column.field))
    .map((column) => column.field);
};

<DataGridPremium
  slots={{
    toolbar: GridToolbar,
  }}
  slotProps={{
    columnsManagement: {
      getTogglableColumns,
    },
  }}
/>;
按 Enter 开始编辑

要禁用列管理组件页脚中的 显示/隐藏全部 复选框或 重置 按钮，请将 disableShowHideToggle 或 disableResetButton 传递给 slotProps.columnsManagement。

<DataGrid
  slots={{
    toolbar: GridToolbar,
  }}
  slotProps={{
    columnsManagement: {
      disableShowHideToggle: true,
      disableResetButton: true,
    },
  }}
/>

自定义搜索激活时操作按钮的行为

默认情况下，显示/隐藏全部 复选框会切换所有列的可见性，包括当前搜索结果中不可见的列。

要仅切换当前搜索结果中存在的列的可见性，请将 toggleAllMode: 'filteredOnly' 传递给 slotProps.columnsManagement。

<DataGrid
  slotProps={{
    columnsManagement: {
      toggleAllMode: 'filteredOnly',
    },
  }}
/>
按 Enter 开始编辑

API