如何在MUIx Data Grid Pro中编程切换筛选面板并设置快捷键

要实现Alt+L切换筛选面板，你可以通过apiRef访问Data Grid的内部状态判断面板开闭状态，结合键盘事件监听完成切换逻辑，具体实现如下：

• 获取筛选面板状态：MUI X Data Grid的内部状态里，filter.panel.open字段直接反映筛选面板的开闭状态，通过apiRef.current.state.filter.panel.open即可获取这个布尔值。
• 监听快捷键事件：用React的useEffect钩子在组件挂载时添加键盘按键监听，判断是否触发了Alt+L组合键。
• 实现切换逻辑：根据获取到的面板状态，条件调用showFilterPanel()或hideFilterPanel()方法。

完整代码示例 #

import { useGridApiRef, DataGridPro } from '@mui/x-data-grid-pro';
import { useEffect } from 'react';

function MyDataGrid() {
  const apiRef = useGridApiRef();

  useEffect(() => {
    const handleKeyDown = (event) => {
      // 判断是否按下Alt+L（忽略大小写）
      if (event.altKey && event.key.toLowerCase() === 'l') {
        event.preventDefault(); // 阻止默认行为，避免与浏览器快捷键冲突
        const isPanelOpen = apiRef.current.state.filter.panel.open;
        isPanelOpen ? apiRef.current.hideFilterPanel() : apiRef.current.showFilterPanel();
      }
    };

    window.addEventListener('keydown', handleKeyDown);
    // 组件卸载时移除监听，防止内存泄漏
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, [apiRef]);

  // 自定义列配置与数据
  const columns = [
    { field: 'id', headerName: 'ID', width: 70 },
    { field: 'name', headerName: '名称', width: 130 },
    { field: 'age', headerName: '年龄', width: 90 }
  ];
  const rows = [
    { id: 1, name: '张三', age: 28 },
    { id: 2, name: '李四', age: 32 }
  ];

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPro
        apiRef={apiRef}
        columns={columns}
        rows={rows}
      />
    </div>
  );
}

export default MyDataGrid;

补充说明 #

• 调用event.preventDefault()可以避免浏览器默认的Alt+L快捷键行为（若存在），防止功能冲突。
• 确保apiRef已正确绑定到DataGridPro组件，才能正常访问内部状态与方法。
• 无论你使用客户端筛选（filterMode="client"）还是服务端筛选（filterMode="server"），该状态判断逻辑都适用。

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