Comment puis-je utiliser l'état actuel du MUI pour additionner et afficher les colonnes ?

Question

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.

L'API

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.

La méthode

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

Answer 1

Vous pouvez utiliser MUI DataGridPro API 中的 gridFilteredSortedRowIdsSelector pour obtenir la somme d'une colonne. Ce sélecteur renvoie un tableau d'ID de ligne actuellement filtrés et triés dans la grille. Vous pouvez utiliser ce tableau pour accéder aux données des lignes et calculer la somme des colonnes requises. Par exemple, vous pouvez faire ce qui suit :

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

Alors

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

Vous pouvez voir l'exemple complet ici : codesandbox.io

Pour en savoir plus, consultez Sélecteurs de filtres, Objets API et Statut d'accès.