Je crée une application Web MUI pour suivre certaines données personnelles.

J'utilise MUI datagrid pro pour afficher les données et, comme nous le savons, il dispose de filtres assez étendus à l'intérieur de son composant datagrid.

Je souhaite afficher la somme de la colonne filtrée actuellement affichée sans avoir à réinterroger la base de données pour obtenir ces valeurs spécifiques. J'ai l'impression que cela devrait être assez simple, mais je ne sais pas comment y accéder.

datagridpro se trouve à l'adresse : https://mui.com/x/api/data-grid/data-grid-pro/

Mon composant de grille de données est construit comme suit :

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


        transformedData = transformData(data)

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

Ceci est fourni via le useEffect standard pour définir l'état avec les données.

transformedData est similaire à :

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

Voici le code actuel montrant le composant 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 }}
  />

Encore une fois, je souhaite essentiellement afficher la somme de la colonne spécifiée dans un div séparé en haut de la page, formaté comme ceci :

Valeur totale 1 : somme(valeur_1) |Valeur totale 2 : somme(valeur_2) |Valeur totale : somme(index)

[insérer les données du tableau ici]

De même, lorsque je filtre en fonction de la grille de données MUI, je souhaite afficher la somme de ces colonnes d'affichage.

Supposons que value_1 ait 4 lignes au total et que les valeurs soient affichées ci-dessous

value_1 
   |   3     
   |   4
   |   1
   |   2

Supposons que je veuille filtrer par valeur >2.

Sur le composant datagridpro, cela sera filtré et affiché comme :

value_1 
   |   3     
   |   4

Je souhaite afficher le 计数，即2，行的总和将为7 de la colonne affichée. < /p>

Quelle propriété API dois-je utiliser pour y accéder ?

Merci