Wie kann ich den aktuellen MUI-Status zum Summieren und Anzeigen von Spalten verwenden?

Question

Ich erstelle eine MUI-Webanwendung, um einige persönliche Daten zu verfolgen.

Ich verwende MUI Datagrid Pro zum Anzeigen von Daten und wie wir wissen, enthält die Datagrid-Komponente einige ziemlich umfangreiche Filter.

Ich möchte die Summe der aktuell angezeigten gefilterten Spalte anzeigen, ohne die Datenbank erneut abfragen zu müssen, um diese spezifischen Werte zu erhalten. Es fühlt sich an, als ob es ziemlich einfach sein sollte, aber ich weiß nicht, wie ich darauf zugreifen soll.

Die

datagridpro-API befindet sich unter: https://mui.com/x/api/data-grid/data-grid-pro/

Meine Datengitterkomponente ist wie folgt aufgebaut:

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


        transformedData = transformData(data)

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

Dies wird über den Standard-useEffect bereitgestellt, um den Status mit Daten festzulegen.

Die

transformedData-Methode ähnelt:

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
   };
});
};

Dies ist der aktuelle Code, der die DataGridPro-Komponente zeigt:

<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 }}
  />

Auch hier möchte ich im Wesentlichen die Summe der angegebenen Spalte in einem separaten Div oben auf der Seite anzeigen, formatiert wie folgt:

Gesamtwert 1: Summe(Wert_1) |Gesamtwert 2: Summe(Wert_2) |Gesamtwert: Summe(Index)

---

[Tabellendaten hier einfügen]

Ähnlich möchte ich beim Filtern basierend auf dem MUI-Datenraster die Summe dieser Anzeigespalten anzeigen.

Angenommen, value_1 hat insgesamt 4 Zeilen und die Werte werden unten angezeigt

value_1 
   |   3     
   |   4
   |   1
   |   2

Angenommen, ich möchte nach Wert filtern >2.

Auf der Datagridpro-Komponente wird dies gefiltert und angezeigt als:

value_1 
   |   3     
   |   4

Ich möchte das 计数，即2，行的总和将为7 der angezeigten Spalte anzeigen. < /p>

Welche API-Eigenschaft sollte ich verwenden, um darauf zuzugreifen?

Danke

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 对象 和 访问状态。