現在の MUI 状態を使用して列を合計して表示するにはどうすればよいですか?

Question

個人データを追跡するための MUI Web アプリケーションを作成しています。

私は MUI datagrid pro を使用してデータを表示していますが、ご存知のとおり、datagrid コンポーネント内には非常に広範なフィルターがいくつかあります。

これらの特定の値を取得するためにデータベースに再クエリを実行することなく、現在表示されているフィルター処理された列の合計を表示したいと考えています。かなりシンプルなはずだと思うのですが、アクセス方法がわかりません。

datagridpro API は、https://mui.com/x/api/data-grid/data-grid-pro/

にあります。

私のデータ グリッド コンポーネントは次のように構築されています:

const fetchData = useCallback(
    async (ID: string[]) => {
        応答 = fetch を待ちます("/api/data")
        データ = 応答.json()
        ...
        ...
        ...


        変換されたデータ = 変換データ(データ)

        return { データ: 変換されたデータ }, };
     [急送] ）;＃＃＃

これは、データを使用して状態を設定するための標準 useEffect によって提供されます。

transformedData メソッドは次のようになります:

consttransformedData = (データ: 任意) => { return data.map((項目: 任意、インデックス: 任意) => { const timestamp = new Date(item.timestamp) 戻る { ID: item.id 値_1: 項目.値_1 値_2: 項目.値_2 日付: タイムスタンプ 値_3: 項目.値_3 }; }); };

これは、DataGridPro コンポーネントを表示する現在のコードです:

<データグリッドプロ rows={transformedDataFromFunction} sx={{ ".MuiDataGrid-row:hover": { 背景色: "#C2C2C2", }、 }} 列={列} editMode="行" rowModesModel={rowModesModel} onRowModesModelChange={(newModel: rowModesModel のタイプ) => setRowModesModel(newModel) } onRowEditStart={handleRowEditStart} onRowEditStop={handleRowEditStop} processRowUpdate={processRowUpdate} コンポーネントProps={{ ツールバー: { setRowModesModel }、 }} スロット={{ ツールバー: GridToolbar }} // MUI が必要ない可能性があるので、これをここに残しておきます // 実験的機能={{ newEditingApi: true }} />

繰り返しになりますが、基本的には、指定された列の合計をページ上部の別の div に次のような形式で表示したいと考えています。

合計値 1: sum(value_1) |合計値 2: sum(value_2) |合計値: sum(index)

[ここにテーブルデータを挿入]

---

同様に、MUI データ グリッドに基づいてフィルター処理する場合、これらの表示列の合計を表示したいと考えています。

value_1 には合計 4 行があり、その値が以下に示されていると仮定します

値_1 | 3 | 4 | 1 | 2

値 

>2

でフィルタリングするとします。 datagridpro コンポーネントでは、これはフィルタリングされ、次のように表示されます:

値_1 | 3 | 4

 表示されている列の 

count

を表示したいのですが、これは 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; 戻る （ <div> {`合計単価: ${ Math.round(合計単価 * 100) / 100 } | 合計手数料率: ${ Math.round(合計手数料率 * 100) / 100 } | 合計数: ${totalCount}`} </div> ); };

＃＃＃それから＃＃＃

<データグリッドプロ /* { ...restProps } */ スロット={{ フッター: SummatedTotals }} />

ここでサンプル全体を表示できます:

codesandbox.io

詳細については、フィルター セレクター

、

API オブジェクト、および アクセス ステータスを参照してください。