数据表格 - 表头过滤器

在表格表头快速访问的每列过滤器。

表头过滤器添加了一个新的表头行，使用户可以快速过滤列。在过滤器面板上添加的过滤器与表头过滤器同步，反之亦然。

您可以通过单击表头过滤器单元格中的运算符按钮或在聚焦于表头过滤器单元格时按 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