如何使用当前 MUI 状态来求和并显示列？

Question

我正在创建一个 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 属性来访问它？

谢谢

Answer 1

您可以使用 MUI DataGridPro API 中的 gridFilteredSortedRowIdsSelector 来获取列的总和。该选择器返回当前在网格中过滤和排序的行 ID 数组。您可以使用此数组访问行数据并计算所需列的总和。例如，您可以执行以下操作：

const SummatedTotals = () => {
  const apiRef = useGridApiContext();
  const filteredSortedRowIds = gridFilteredSortedRowIdsSelector(apiRef);

  const filteredSortedRows = filteredSortedRowIds.map((id) =>
    apiRef.current.getRow(id)
  );

  const totalUnitPrice = filteredSortedRows.reduce(
    (sum, row) => sum + row.unitPrice,
    0
  );
  const totalFeeRate = filteredSortedRows.reduce(
    (sum, row) => sum + row.feeRate,
    0
  );
  const totalCount = filteredSortedRows.length;

  return (
    <div>
      {`Total Unit Price: ${
        Math.round(totalUnitPrice * 100) / 100
      } | Total Fee Rate: ${
        Math.round(totalFeeRate * 100) / 100
      } | Total #: ${totalCount}`}
    </div>
  );
};

然后

<DataGridPro
  /* { ...restProps } */
  slots={{ footer: SummatedTotals }}
/>

您可以在此处查看整个示例：codesandbox.io< /a>

要了解更多信息，请参阅过滤选择器，< a href="https://mui.com/x/react-data-grid/api-object/" rel="nofollow noreferrer">API 对象 和 访问状态。