this is my first question on the website so i hope i will do it well. I try to use the edit mode of MUI datagrid but i’m stuck since a few days on a problem that seems pretty simple :

I would like to update a total that is not on the datagrid to display it to the user but i can’t update it correctly when i edit a cell :

import {
    DataGrid,
    GridColDef,
    GridCellParams,
    gridClasses,
    useGridApiRef, MuiEvent
} from "@mui/x-data-grid";
import {Box} from "@mui/material";
import * as React from "react";
import {DetailCommande, Ligne} from "../../../../app/models/commande";
import {useState} from "react";

type row = {
    id: number,
    reference: string | null,
    qte: number,
    qteLivree: number,
    designation: string,
    prixUnitaire: number,

}

const TableauValidationBL = ({commande}: { commande: DetailCommande }) => {

    const apiRef = useGridApiRef()

    const columns: GridColDef[] = [
        {field: 'reference', headerName: 'Référence', width: 120, headerClassName: 'header'},
        {field: 'designation', headerName: 'Désignation', flex: 1, headerClassName: 'header'},
        {
            field: 'qteLivree',
            headerName: 'Qté validé',
            width: 120,
            headerClassName: 'header',
            editable: true,
            type: 'number'
        },
        {field: 'prixUnitaire', headerName: 'Prix Unitaire', width: 120, headerClassName: 'header'},
        {
            field: 'prixTotal', headerName: 'Prix Total', width: 120, headerClassName: 'header',
            valueGetter: (value, row) => {
                return (row.prixUnitaire * row.qteLivree).toFixed(3);
            }
        },
    ];

    const rows = commande ? commande.lignes.map((ligne: Ligne) => {
                return {
                    id: ligne.idPackaging,
                    reference: ligne.refFournisseur,
                    qte: ligne.qteCmd,
                    qteLivree: ligne.qteCmd,
                    designation: ligne.nomArticle,
                    prixUnitaire: ligne.prixUnitaire,
                }
            }
        )
        : [];

    const [total, setTotal] = useState(rows.reduce((acc, row) => acc + row.prixUnitaire * row.qteLivree, 0));

    return (
        <Box
            sx={{
                '.header': {backgroundColor: 'lightgrey', fontSize: '1.2em'},
                [`.${gridClasses.cell}.changed`]: {
                    backgroundColor: '#76CDCD',
                },
                [`.${gridClasses.cell}.unchanged`]: {
                    backgroundColor: '#7AA95C',
                },
            }}
        >
            <p>{total}</p>
            <DataGrid
                autoHeight
                hideFooter
                getRowHeight={() => 'auto'}
                rows={rows}
                columns={columns}
                apiRef={apiRef}
                showCellVerticalBorder
                getCellClassName={(params: GridCellParams) => {
                    if (params.field === 'qteLivree' && params.value !== params.row.qte) {
                        return 'changed';
                    }
                    if (params.field === 'qteLivree' && params.value === params.row.qte) {
                        return 'unchanged';
                    }
                    return '';
                }}
                // checkboxSelection
            />
        </Box>
    );
};

export default TableauValidationBL;

What i try to do is make possible to the user to changed the actual quantity of a delivery, and update the total. The total for each individual row work when i’m editing.

I’m pretty sure i’m doing wrong already by the way i get the total at first, but it work this way. But when i edit a cell, i don’t know how i can get the total to update.

I already tried to use onCellEditStop but i don’t get the last value. I tried aswell with processRowUpdate : it work when i update one row, but if i update an other one, the first row i updated go back to the initial value.

help for you :

• prixUnitaire : price for one item
• qteLivree : the number of item that has been deliveried

Hope you can help me and sorry for the french name of the values.