如何使用目前 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: 真 }}
  />

同樣，我本質上是想在頁面頂部的單獨 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。

我應該使用什麼 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 href="https://mui.com/x/react-data-grid/api-object/" rel="nofollow noreferrer">API 物件 和 存取狀態。