如何清除MUI X Data Grid中所有已应用的筛选条件？

要清空DataGridPro上已应用的全部筛选规则，直接调用网格实例提供的原生API即可，适配你当前组件嵌套结构的实现步骤如下：

• 从@mui/x-data-grid-pro包中导入useGridApiRef钩子，这个钩子用来获取DataGridPro的实例操作权限
• 在MyDataGrid组件内部初始化apiRef实例，将其绑定到DataGridPro的apiRef属性上
• 编写清除筛选的处理函数，调用实例上的removeAllFilters()方法，再将这个函数作为clearFilter属性传入TableContainer，就能对接你已经写好的头部清除按钮点击事件

改造后的代码示例 #

MyDataGrid.js 改造 #

import { useGridApiRef } from '@mui/x-data-grid-pro';
// 保留你原有的其他导入，比如rows、columns、LoadingOverlay、TableContainer、DataGridPro等

export default function MyDataGrid() {
  // 保留你原有的状态定义，比如selectionModel、setSelectionModel等
  const apiRef = useGridApiRef();

  // 清除所有筛选的处理逻辑
  const handleClearFilters = () => {
    apiRef.current.removeAllFilters();
  };

  return (
    <TableContainer title='My Datagrid' clearFilter={handleClearFilters}>
      <DataGridPro
        apiRef={apiRef} // 新增：绑定网格实例ref
        rows={rows}
        columns={columns}
        pagination={false}
        components={{
          LoadingOverlay,
        }}
        selectionModel={selectionModel}
        onSelectionModelChange={setSelectionModel}
      />
    </TableContainer>
  );
}

TableContainer.js 无需修改 #

你现有的TableContainer组件已经预留了clearFilter入参，并且已经将该方法绑定到了第一个筛选按钮的onClick事件上，传入处理函数后即可直接生效。

其他实现方式（受控筛选模式） #

如果你是通过受控的filterModel属性管理网格筛选状态，不需要使用apiRef的话，只要在清除逻辑中将filterModel的值重置为{ items: [] }即可实现同样的清空效果。

小提示：绑定apiRef之后，你头部栏剩下的排序重置、列显隐控制、锁定列、Excel导出等按钮功能，都可以直接通过apiRef.current调用DataGridPro提供的对应原生方法实现，不需要额外写复杂逻辑。

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