MUI X Data Grid Pro过滤后弹窗未隐藏，如何配置自动关闭过滤菜单

基础配置实现（v6.0.0及以上版本） #

如果你的MUI X Data Grid版本在v6.0.0及以上，直接添加内置属性closeFilterPanelOnApply即可实现应用过滤后自动关闭弹窗，示例代码：

import { DataGrid } from "@mui/x-data-grid";

<DataGrid
  rows={rows}
  columns={columns}
  closeFilterPanelOnApply
/>

全版本兼容实现 #

如果是v6以下版本，或者需要自定义控制关闭时机（比如服务端过滤需要等结果返回再关闭），可以通过状态监听回调实现，代码如下：

import { useState } from 'react';
import { DataGridPro } from "@mui/x-data-grid-pro";

function FilterableDataGrid({ rows, columns }) {
  const [isFilterPanelOpen, setIsFilterPanelOpen] = useState(false);

  return (
    <DataGridPro
      rows={rows}
      columns={columns}
      componentsProps={{
        filterPanel: {
          open: isFilterPanelOpen,
          onOpen: () => setIsFilterPanelOpen(true),
          onClose: () => setIsFilterPanelOpen(false),
        }
      }}
      onFilterModelChange={(model, details) => {
        // 仅当主动触发应用过滤操作时关闭面板，避免筛选输入过程中误关
        if (details.reason === 'apply') {
          // 如果是服务端过滤，可以把关闭逻辑放到接口请求成功的回调中
          setIsFilterPanelOpen(false);
        }
      }}
    />
  );
}

• 免费版Data Grid也可使用上述方案，只需将引入的DataGridPro替换为DataGrid即可。

服务端过滤场景提示：如果你的过滤逻辑是请求后端接口获取过滤后结果，可将关闭面板的逻辑移到接口请求成功的回调函数中，避免面板提前关闭但结果还未刷新的问题。

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