個人データを追跡するための 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 プロパティを使用すればよいですか?
P粉5761849332024-02-27 13:08:35
MUI DataGridPro API の
gridFilteredSortedRowIdsSelector を使用して、列の合計を取得できます。このセレクターは、グリッド内で現在フィルター処理および並べ替えられている行 ID の配列を返します。この配列を使用して行データにアクセスし、必要な列の合計を計算できます。たとえば、次のことができます:
###それから###<データグリッドプロ /* { ...restProps } */ スロット={{ フッター: SummatedTotals }} />
ここでサンプル全体を表示できます:
codesandbox.io
詳細については、フィルター セレクター
、API オブジェクト、および アクセス ステータス< a href="https://mui.com/x/react-data-grid/api-object/" rel="nofollow noreferrer">を参照してください。