如何以数组形式获取MUI DataGrid中的所有行（含过滤后数据）

要获取DataGrid过滤后的行数据，分两种场景（是否考虑分页），以下是具体实现方式：

1. 获取当前渲染的行（含分页） #

如果只需要当前页面显示的过滤后数据，直接使用apiRef的getRenderedRows()方法：

import { DataGrid, useGridApiRef } from '@mui/x-data-grid';

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

  const getFilteredVisibleRows = () => {
    // 返回当前页面渲染的所有行数组
    const filteredRows = apiRef.current.getRenderedRows();
    console.log(filteredRows);
    return filteredRows;
  };

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid 
        apiRef={apiRef} 
        rows={yourRowData} 
        columns={yourColumns} 
        // 开启过滤功能，根据实际配置选择server或client模式
        filterMode="client"
      />
      <button onClick={getFilteredVisibleRows}>获取当前页过滤数据</button>
    </div>
  );
}

getRenderedRows()会返回DataGrid当前展示的所有行，包含过滤、排序、分页后的结果。

2. 获取所有符合过滤条件的行（忽略分页） #

如果需要拿到所有满足过滤规则的行（不受分页限制），可以结合getFilterModel()和内置工具函数实现：

方式一：使用内置applyFilter工具函数 #

import { DataGrid, useGridApiRef } from '@mui/x-data-grid';
import { applyFilter } from '@mui/x-data-grid/internals';

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

  const getAllFilteredRows = () => {
    const filterModel = apiRef.current.getFilterModel();
    const allRows = apiRef.current.getRows();
    
    // 应用过滤模型，返回所有符合条件的行数组
    const filteredRows = applyFilter({
      rows: allRows,
      filterModel,
      getCellValue: (row, field) => row[field],
    });

    console.log(filteredRows);
    return filteredRows;
  };

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid apiRef={apiRef} rows={yourRowData} columns={yourColumns} />
      <button onClick={getAllFilteredRows}>获取所有过滤数据</button>
    </div>
  );
}

方式二：手动实现过滤逻辑 #

如果需要自定义过滤规则，可手动遍历所有行匹配过滤条件：

const getAllFilteredRows = () => {
  const filterModel = apiRef.current.getFilterModel();
  const allRows = apiRef.current.getRows();

  const filteredRows = allRows.filter(row => {
    // 确保行满足所有过滤规则
    return filterModel.items.every(filterItem => {
      const cellValue = row[filterItem.field];
      const filterValue = filterItem.value;

      // 示例：处理文本包含过滤
      if (filterItem.operator === 'contains') {
        return String(cellValue).toLowerCase().includes(filterValue.toLowerCase());
      }
      // 根据需求扩展其他操作符（如equals、greaterThan等）
      return true;
    });
  });

  return filteredRows;
};

注意：如果使用服务端过滤，DataGrid本地仅存储当前页数据，此时需直接从后端接口获取过滤后的完整数据集，无法通过前端方法获取全部结果。

内容的提问来源于stack exchange，提问作者Ders Çalışma zamanı