Bagaimanakah saya boleh menggunakan keadaan MUI semasa untuk menjumlahkan dan memaparkan lajur?

Question

Saya sedang mencipta aplikasi web MUI untuk menjejaki beberapa data peribadi.

Saya menggunakan MUI datagrid pro untuk memaparkan data dan seperti yang kita tahu ia mempunyai beberapa penapis yang cukup luas di dalam komponen datagridnya.

Saya ingin memaparkan jumlah lajur ditapis yang sedang dipaparkan tanpa perlu menanya semula pangkalan data untuk mendapatkan nilai khusus ini. Rasanya ia sepatutnya agak mudah, tetapi saya tidak tahu bagaimana untuk mengaksesnya.

API datagridpro terletak di: https://mui.com/x/api/data-grid/data-grid-pro/

Komponen grid data saya dibina seperti berikut:

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


        transformedData = transformData(data)

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

Ini disediakan melalui useEffect standard untuk menetapkan keadaan dengan data.

Kaedah

transformedData adalah serupa dengan:

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

Ini ialah kod semasa yang menunjukkan komponen 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: true }}
  />

Sekali lagi, saya pada asasnya ingin memaparkan jumlah lajur yang ditentukan dalam div berasingan di bahagian atas halaman, diformat seperti ini:

Jumlah nilai 1: jumlah(nilai_1) |Jumlah nilai 2: jumlah(nilai_2) |Jumlah nilai: jumlah(indeks)

---

[masukkan data jadual di sini]

Begitu juga, apabila saya menapis berdasarkan grid data MUI, saya ingin menunjukkan jumlah lajur paparan ini.

Anggap nilai_1 mempunyai 4 baris secara keseluruhan dan nilai ditunjukkan di bawah

value_1 
   |   3     
   |   4
   |   1
   |   2

Andaikan saya ingin menapis mengikut nilai >2.

Pada komponen datagridpro ini akan ditapis dan dipaparkan sebagai:

value_1 
   |   3     
   |   4

Saya ingin menunjukkan 计数，即2，行的总和将为7 lajur yang dipaparkan. < /p>

Apakah sifat API yang harus saya gunakan untuk mengaksesnya?

Terima kasih

Answer 1

Anda boleh menggunakan MUI DataGridPro API 中的 gridFilteredSortedRowIdsSelector untuk mendapatkan jumlah lajur. Pemilih ini mengembalikan tatasusunan ID baris yang sedang ditapis dan diisih dalam grid. Anda boleh menggunakan tatasusunan ini untuk mengakses data baris dan mengira jumlah lajur yang diperlukan. Sebagai contoh, anda boleh melakukan perkara berikut:

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

Kemudian

<DataGridPro
  /* { ...restProps } */
  slots={{ footer: SummatedTotals }}
/>

Anda boleh melihat keseluruhan contoh di sini: codesandbox.io

Untuk mengetahui lebih lanjut, lihat Pemilih Penapis, Objek API dan Status Akses.