如何从MUI X DataGridPro获取当前筛选后的数据

• 先通过useGridApiRef创建网格的API引用，这是获取网格状态的核心入口：

  import { useGridApiRef } from '@mui/x-data-grid-pro';
  
  const apiRef = useGridApiRef();
  

• 将创建好的apiRef传入DataGridPro组件：

  <DataGridPro apiRef={apiRef} columns={columns} rows={rows} {...其他配置} />
  

• 有两种方式获取筛选后的数据：
  1. 实时监听筛选变动：用useGridEventListener监听filterModelChange事件，每次筛选条件变化时自动获取结果

     import { useGridEventListener } from '@mui/x-data-grid-pro';
     
     useGridEventListener(apiRef, 'filterModelChange', () => {
       // getRenderedRows 返回当前分页+筛选后的行数据
       const filteredRows = apiRef.current.getRenderedRows();
       // 这里可以把filteredRows传递给其他组件使用
     });
     

  2. 主动触发获取：在需要的时机（比如按钮点击）调用API方法获取

     const getFilteredData = () => {
       // getFilteredRows 返回所有筛选后的行（忽略分页）
       const allFilteredRows = apiRef.current.getFilteredRows();
       // 处理或传递数据
     };
     

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