0
229
Vistas¿Cómo puedo editar una celda de un DataGrid por código?
Me gustaría editar una celda en un Datagrid por código.
El Datagrid en sí tiene columnas editables (nombre y apellido), pero si lamenta este cambio, hay una columna con un botón de cancelar por fila que debería restablecer las celdas de la misma fila a los valores predeterminados.
Puede realizar cambios en varias filas de la cuadrícula de datos y simplemente restaurar algunas filas, no todas, por lo que restablecer toda la cuadrícula de datos no es una opción.
¿Cómo debo abordar esto?
¡Gracias de antemano!
import React from "react"; import { DataGrid } from "@mui/x-data-grid"; import { Button } from "@mui/material"; export default function DataTable() { const columns = [ { field: 'id', headerName: 'ID' }, { field: 'firstName', headerName: 'First name', editable: true }, { field: 'lastName', headerName: 'Last name', editable: true }, { field: 'cancel', headerName: 'Cancel', renderCell: (params) => <button onClick={ handleButton }/> }, ]; const rows = [ { id: 1, lastName: 'Snow', firstName: 'Jon' }, { id: 2, lastName: 'Lannister', firstName: 'Cersei' }, { id: 3, lastName: 'Lannister', firstName: 'Jaime' }, { id: 4, lastName: 'Stark', firstName: 'Arya' }, { id: 5, lastName: 'Targaryen', firstName: 'Daenerys' }, ]; const handleButton = (event) => { // CODE HERE } return ( <DataGrid rows = {rows} columns = { columns } /> ); }1 Respuestas
Responde la pregunta0
Puede usar useState hook para actualizar los datos de la tabla con los onCellEditCommit (es para sincronizar datos con la actualización de una sola celda) y handleButton (es para restablecer la fila) definidos a continuación.
Prueba como a continuación:
import React, { useState } from "react"; import { DataGrid } from "@mui/x-data-grid"; export default function DataTable() { const columns = [ { field: "id", headerName: "ID" }, { field: "firstName", headerName: "First name", editable: true }, { field: "lastName", headerName: "Last name", editable: true }, { field: "cancel", headerName: "Cancel", renderCell: (params) => ( <button onClick={() => handleButton(params)}>cancel</button> ) } ]; const rows = [ { id: 1, lastName: "Snow", firstName: "Jon" }, { id: 2, lastName: "Lannister", firstName: "Cersei" }, { id: 3, lastName: "Lannister", firstName: "Jaime" }, { id: 4, lastName: "Stark", firstName: "Arya" }, { id: 5, lastName: "Targaryen", firstName: "Daenerys" } ]; const [data, setData] = useState(rows); const handleButton = ({ id }) => { setData((prevData) => prevData.map((item) => item.id === id ? { ...item, firstName: "", lastName: "" } : item ) ); }; const onCellEditCommit = ({ id, field, value }) => { setData((prevData) => prevData.map((item) => item.id === id ? { ...item, [field]: value } : item ) ); }; console.log(data); return ( <div style={{ height: 400, width: "100%" }}> <DataGrid rows={data} columns={columns} onCellEditCommit={onCellEditCommit} /> </div> ); }Demostración de trabajo
