資料格 - 標題篩選器

在格線標題上快速存取每個欄位的篩選器。

標題篩選器新增一個標題列，讓使用者可以快速篩選欄位。在篩選面板上新增的篩選器會與標題篩選器同步，反之亦然。

您可以透過點擊標題篩選器儲存格中的運算子按鈕，或在聚焦於標題篩選器儲存格時按下 Ctrl+Enter (macOS 上為 ⌘ Command+Enter) 來切換不同的運算子。

簡易標題篩選器

您可以使用 `disableColumnFilter` 屬性停用預設篩選面板，並僅透過將 `slots.headerFilterMenu` 作為 `null` 傳遞來顯示預設運算子。

自訂標題篩選器

有多種方法可以自訂標題篩選器。

renderHeaderFilter 方法

您可以使用 `GridColDef` 的 `renderHeaderFilter` 方法來自訂特定欄位的標題篩選器儲存格。

const columns: GridColDef[] = [
  {
    field: 'isAdmin',
    renderHeaderFilter: (params: GridHeaderFilterCellProps) => (
      <MyCustomHeaderFilter {...params} />
    ),
  },
];

以下示範使用 `renderHeaderFilter` 方法來自訂 `isAdmin` 欄位的標題篩選器儲存格，並隱藏 `phone` 欄位的篩選器儲存格。

使用 `filterOperators` 自訂

如果篩選運算子具有自訂的 InputComponent，則相同的元件將用於標題篩選器。

當作為標題篩選器呈現時，`InputComponent` 也會接收包含篩選運算子選單和清除按鈕的 `headerFilterMenu` 和 `clearButton` 屬性。

headerFilterCell 插槽

您可以使用 `slots.headerFilterCell` 來完全自訂標題篩選器儲存格。由於預設插槽元件處理鍵盤導航和焦點管理，如果您使用自訂元件，則可能需要自行處理。

此外，`slots.headerFilterMenu` 也可用於自訂標題篩選器儲存格的選單。

<DataGridPro {...data} slots={{ headerFilterCell: MyCustomHeaderFilterCell }} />

自訂標題篩選器高度

預設情況下，標題篩選器列的高度與標題列相同 (由 `columnHeaderHeight` 屬性表示)。您可以使用 `headerFilterHeight` 屬性來自訂標題篩選器儲存格的高度。

<DataGridPro {...data} headerFilterHeight={52} />

忽略變音符號 (重音)

您可以在篩選列時忽略變音符號 (重音)。請參閱 快速篩選器 - 忽略變音符號 (重音)。

API

• DataGrid
• DataGridPro
• DataGridPremium