如何在MUI DataGrid Pro中自定义筛选面板页脚（无需重写整个面板）

MUI DataGrid Pro官方并未直接提供FilterPanelFooter这类组件配置项，但可以通过组件插槽系统，在不重写完整筛选面板的前提下，自定义页脚区域并保留原有的“Add Filter”按钮。

实现步骤与代码示例 #

1. 编写自定义页脚组件 #

组件接收原有页脚元素作为参数，在其旁新增刷新按钮并实现逻辑：

import { DataGridPro, useGridApiContext } from '@mui/x-data-grid-pro';
import Button from '@mui/material/Button';
import RefreshIcon from '@mui/icons-material/Refresh';

const CustomFilterPanelFooter = ({ existingFooter }) => {
  // 获取DataGrid的API用于操作数据和筛选状态
  const api = useGridApiContext();

  const handleRefreshFilters = () => {
    // 获取当前筛选模型，用于后续带条件请求新数据
    const currentFilter = api.getFilterModel();
    // 这里替换为你的数据刷新逻辑：比如调用接口传入currentFilter，更新rows
    console.log('基于当前筛选条件刷新数据', currentFilter);
    // 若需强制刷新表格，可调用api.refresh()
    api.refresh();
  };

  return (
    <div style={{ display: 'flex', gap: 8, alignItems: 'center', padding: '8px 16px' }}>
      {/* 保留原有的"Add Filter"按钮区域 */}
      {existingFooter}
      {/* 新增的刷新按钮 */}
      <Button
        variant="outlined"
        startIcon={<RefreshIcon />}
        onClick={handleRefreshFilters}
      >
        刷新筛选
      </Button>
    </div>
  );
};

2. 在DataGrid中配置插槽 #

通过componentsProps.filterPanel.footer注入自定义页脚：

const MyDataGrid = ({ rows, columns }) => {
  return (
    <DataGridPro
      rows={rows}
      columns={columns}
      componentsProps={{
        filterPanel: {
          footer: (props) => <CustomFilterPanelFooter existingFooter={props.children} />
        }
      }}
      // 其他表格配置项...
    />
  );
};

关键说明 #

• props.children对应筛选面板原有的页脚内容（即“Add Filter”按钮），通过这种方式无需重写整个筛选面板结构
• 借助useGridApiContext()可直接获取表格API，方便获取筛选状态、刷新表格或更新数据

内容的提问来源于stack exchange，提问作者Sam Levine