MUI DataGrid：从表头按钮打开列筛选器及始终显示筛选按钮

问题1：从表头按钮直接打开列筛选器 #

可以借助 apiRef 调用DataGrid内置的 openFilterPanel 方法，配合自定义表头组件实现点击按钮直接打开对应列的筛选面板：

1. 先获取DataGrid的API引用：

import { useGridApiRef } from '@mui/x-data-grid';
import IconButton from '@mui/material/IconButton';
import FilterListIcon from '@mui/icons-material/FilterList';

const apiRef = useGridApiRef();

2. 在列定义中自定义表头，添加触发按钮：

const columns = [
  {
    field: 'name',
    headerName: '姓名',
    renderHeader: (params) => (
      <div style={{ display: 'flex', alignItems: 'center' }}>
        {params.colDef.headerName}
        <IconButton
          size="small"
          onClick={() => apiRef.current.openFilterPanel(params.field)}
          sx={{ marginLeft: 1 }}
        >
          <FilterListIcon />
        </IconButton>
      </div>
    )
  },
  // 其他列配置...
];

3. 将 apiRef 传入DataGrid组件：

<DataGrid apiRef={apiRef} columns={columns} rows={yourRowsData} />

点击表头的筛选按钮，就能直接打开对应列的筛选面板。

问题2：强制每个列表头的筛选按钮始终可见 #

默认无筛选条件时，筛选图标不会渲染到DOM中，所以需要自定义列头组件，手动添加筛选按钮，确保无论是否有筛选条件都显示：

方案1：全局替换列头组件（推荐） #

通过自定义 GridColumnHeader 组件，全局为所有列添加固定显示的筛选按钮：

import { GridColumnHeader, useGridApiContext } from '@mui/x-data-grid';
import IconButton from '@mui/material/IconButton';
import FilterListIcon from '@mui/icons-material/FilterList';

const CustomColumnHeader = (props) => {
  const apiRef = useGridApiContext();
  return (
    <GridColumnHeader
      {...props}
      renderFilterIcon={() => (
        <IconButton
          size="small"
          onClick={(e) => {
            e.stopPropagation(); // 避免触发表头的排序等其他事件
            apiRef.current.openFilterPanel(props.field);
          }}
          sx={{ opacity: props.hasFilter ? 1 : 0.6 }} // 可选：有筛选时高亮，无筛选时半透明
        >
          <FilterListIcon />
        </IconButton>
      )}
    />
  );
};

// 在DataGrid中使用自定义组件
<DataGrid
  components={{ ColumnHeader: CustomColumnHeader }}
  columns={columns}
  rows={yourRowsData}
  filterable={true} // 确保开启全局筛选功能
/>

方案2：单独为列配置自定义表头 #

如果只需要给特定列添加固定筛选按钮，可在列定义中单独设置 renderHeader：

const columns = [
  {
    field: 'age',
    headerName: '年龄',
    filterable: true, // 开启该列筛选
    renderHeader: (params) => (
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <span>{params.colDef.headerName}</span>
        <IconButton
          size="small"
          onClick={() => apiRef.current.openFilterPanel(params.field)}
        >
          <FilterListIcon />
        </IconButton>
      </div>
    )
  },
  // 其他列配置...
];

内容的提问来源于stack exchange，提问作者Oleksandr Fomin