我正在创建一个 MUI Web 应用程序来跟踪一些个人数据。

我正在使用 MUI datagrid pro 来显示数据，正如我们所知，它的 datagrid 组件内有一些相当广泛的过滤器。

我想显示当前显示的过滤列的总和，而不必重新查询数据库来获取这些特定值。感觉它应该相当简单，但我不知道如何访问它。

datagridpro API 位于：https://mui.com/x/api/data-grid/data-grid-pro/

我的数据网格组件的构造如下：

const fetchData = useCallback(
    async (IDs: string[]) => { 
        response = await fetch("/api/data")
        data = response.json()
        ...
        ...
        ... 


        transformedData = transformData(data)

        return { data: transformedData }, }; 
     [dispatch] );

这通过标准 useEffect 提供，以使用数据设置状态。

transformedData 方法类似于：

const transformedData = (data: any) => {
   return data.map((item: any, index: any) => {
  const timestamp = new Date(item.timestamp)

  return {
    id: item.id
    value_1: item.value_1
    value_2: item.value_2
    date: timestamp
    value_3: item.value_3
   };
});
};

这是显示 DataGridPro 组件的当前代码：

<DataGridPro
    rows={transformedDataFromFunction}
    sx={{
      ".MuiDataGrid-row:hover": {
        backgroundColor: "#C2C2C2",
      },
    }}
    columns={columns}
    editMode="row"
    rowModesModel={rowModesModel}
    onRowModesModelChange={(newModel: typeof rowModesModel) =>
      setRowModesModel(newModel)
    }
    onRowEditStart={handleRowEditStart}
    onRowEditStop={handleRowEditStop}
    processRowUpdate={processRowUpdate}
    componentsProps={{
      toolbar: { setRowModesModel },
    }}
    slots={{ toolbar: GridToolbar }}

    // leaving this in here on off chance we don't need MUI
    // experimentalFeatures={{ newEditingApi: true }}
  />

同样，我本质上是想在页面顶部的单独 div 中显示指定列的总和，格式为：

总值 1：sum(value_1) |总计值 2： sum(value_2) |总数：总和（索引）

[在此处插入表格数据]

同样，当我根据 MUI 数据网格进行过滤时，我想显示这些显示列的总和。

假设 value_1 总共有 4 行，值显示在下面

value_1 
   |   3     
   |   4
   |   1
   |   2

假设我想按值>2进行过滤。

在 datagridpro 组件上，这将被过滤并显示为：

value_1 
   |   3     
   |   4

我想显示显示的列的计数，即2，行的总和将为7。< /p>

我应该使用什么 API 属性来访问它？

谢谢