How do i upgrade a total in a useState when i edit cell in MUI X Data Grid

0 votes
Can you tell me How to make the move the checkbox to second column in case of MUI X DataGridPro tree view?
1 day ago in Node-js by Ashutosh
• 24,410 points
10 views

1 answer to this question.

0 votes

To update a total value stored in React state when a cell is edited in MUI X Data Grid, you need to:

Use the processRowUpdate prop to handle edits

Update your state with the new total

Solution Code

import { DataGrid } from '@mui/x-data-grid';

import { useState, useCallback } from 'react';

function EditableDataGrid() {

  const [rows, setRows] = useState([

    { id: 1, name: 'Item 1', price: 10 },

    { id: 2, name: 'Item 2', price: 20 },

    { id: 3, name: 'Item 3', price: 30 },

  ]);

  const [total, setTotal] = useState(60); 

  const calculateTotal = useCallback((rows) => {

    return rows.reduce((sum, row) => sum + row.price, 0);

  }, []);

  const processRowUpdate = useCallback((newRow, oldRow) => {

    const updatedRows = rows.map(row => 

      row.id === newRow.id ? newRow : row

    );

    const newTotal = calculateTotal(updatedRows);

    setRows(updatedRows);

    setTotal(newTotal);

    return newRow;

  }, [rows, calculateTotal]);

  const columns = [

    { field: 'name', headerName: 'Name', width: 150 },

    { 

      field: 'price', 

      headerName: 'Price', 

      width: 150,

      type: 'number',

      editable: true,

    },

  ];


  return (

    <div>

      <div style={{ height: 400, width: '100%' }}>

        <DataGrid

          rows={rows}

          columns={columns}

          processRowUpdate={processRowUpdate}

          experimentalFeatures={{ newEditingApi: true }}

        />

      </div>

      <div style={{ marginTop: 20 }}>

        <strong>Total:</strong> {total}

      </div>

    </div>

  );

}

answered 9 hours ago by anonymous

Related Questions In Node-js

0 votes
1 answer

How do I parse a data URL in Node?

Hello @kartik, Put the data into a Buffer ...READ MORE

answered Nov 30, 2020 in Node-js by Niroj
• 82,840 points
1,907 views
0 votes
1 answer

How do I define methods in a Mongoose model?

Hello @kartik, You didn't specify whether you were ...READ MORE

answered Nov 27, 2020 in Node-js by Niroj
• 82,840 points
2,867 views
0 votes
1 answer

How do I manage MongoDB connections in a Node.js web application?

When the Node.js application starts, create a ...READ MORE

answered Jun 10, 2022 in Node-js by Neha
• 9,020 points
2,123 views
0 votes
1 answer

How to customize Autocomplete of MUI, in react?

The following approaches are used to customize ...READ MORE

answered 9 hours ago in Node-js by anonymous
16 views
0 votes
1 answer

How do I control the space between the bars in my BarPlot of my MUI Bar Chart?

Controlling Space Between Bars in MUI Bar ...READ MORE

answered 9 hours ago in Node-js by anonymous
16 views
0 votes
1 answer

How to select specific marker in MUI React Charts

You can implement marker selection through click ...READ MORE

answered 9 hours ago in Node-js by anonymous
11 views
0 votes
1 answer

How do I use ES6 features like destructuring in a Node.js application?

To use ES6 features like destructuring in ...READ MORE

answered Dec 17, 2024 in Node-js by Navya
129 views
0 votes
1 answer

How do I create a custom object in react?

Creating a custom popover in React enhances ...READ MORE

answered Dec 31, 2024 in Node-js by Navya
116 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP