検索

ホームページ  >  に質問  >  本文

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

個人データを追跡するための 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粉908138620P粉908138620274日前422 
全員に返信(1)返信します
  • P粉576184933
    P粉5761849332024-02-27 13:08:35
    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 オブジェクト、および アクセス ステータス< a href="https://mui.com/x/react-data-grid/api-object/" rel="nofollow noreferrer">を参照してください。 
    返事
    0
  • キャンセル返事