如何利用MUI DataGrid Pro状态计算展示筛选后列的汇总值？

要在页面顶部展示DataGrid Pro筛选后的指定列汇总值（无需重新查询数据库），核心是利用DataGrid内置的状态选择器和API引用，直接从组件维护的本地状态中提取筛选后的数据并计算汇总。以下是关键API属性及实现步骤：

核心API与用法 #

• useGridApiRef：创建DataGrid的API引用，用于关联组件状态并获取实时数据。
• gridFilteredSortedRowIdsSelector：筛选器，获取经过筛选、排序后的所有行ID数组。
• gridRowSelector：根据行ID提取对应行的完整数据。
• useGridSelector：监听DataGrid状态变化，实时获取筛选后的行数据。

代码实现示例 #

import { useGridApiRef, useGridSelector, gridFilteredSortedRowIdsSelector, gridRowSelector } from '@mui/x-data-grid-pro';

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

  // 获取筛选排序后的行ID数组
  const filteredRowIds = useGridSelector(apiRef, gridFilteredSortedRowIdsSelector);
  // 根据行ID获取对应的行数据
  const filteredRows = useGridSelector(apiRef, (state) => 
    filteredRowIds.map(id => gridRowSelector(state, id))
  );

  // 计算汇总值
  const totalValue1 = filteredRows.reduce((sum, row) => sum + (row.value_1 || 0), 0);
  const totalValue2 = filteredRows.reduce((sum, row) => sum + (row.value_2 || 0), 0);
  const displayRowCount = filteredRowIds.length;

  return (
    <div>
      {/* 顶部汇总区域 */}
      <div className="summary-bar">
        <p>显示行数：{displayRowCount}</p>
        <p>value_1总和：{totalValue1}</p>
        <p>value_2总和：{totalValue2}</p>
      </div>
      {/* DataGrid Pro组件 */}
      <DataGridPro
        apiRef={apiRef}
        columns={yourColumns}
        rows={yourRows}
        // 其他配置项（筛选、排序等）
      />
    </div>
  );
}

说明 #

• 所有计算均在本地完成，依赖DataGrid内部维护的筛选后行状态，无需额外请求数据库。
• useGridSelector会自动监听筛选条件变化，当用户调整筛选规则时，汇总值会实时更新。

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