Maison > Questions et réponses > le corps du texte
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'APIdatagridpro 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éthodetransformedData 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
P粉5761849332024-02-27 13:08:35
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< /a>
Pour en savoir plus, consultez Sélecteurs de filtres, < a href="https://mui.com/x/react-data-grid/api-object/" rel="nofollow noreferrer">Objets API et Statut d'accès.