跳到主要內容
+

資料格 - 欄位可見性

定義哪些欄位為可見。

預設情況下，所有欄位都是可見的。欄位的可見性可以透過使用者介面以兩種方式切換

  • 透過開啟欄位選單並點擊隱藏選單項目。
  • 透過點擊欄位選單並切換欄位以顯示或隱藏。

您可以透過在 GridColDef 中將 hideable 設定為 false，來防止使用者透過使用者介面隱藏欄位。

在以下示範中，「使用者名稱」欄位無法隱藏。

按下 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 開始編輯

欄位可見性面板

欄位可見性面板允許使用者控制資料格中哪些欄位是可見的。

面板可以透過以下方式開啟

按下 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