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.

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