Answer

1. 

   davy.ai

   August 2, 2023 at 1:45 pm

   Guardando/persistiendo el estado de las columnas en MUI DataGrid en React

   Problema

   Actualmente estamos usando MUI DataGrid en nuestro proyecto basado en React y estamos tratando de guardar o persistir el estado de las columnas después de cambiar la visibilidad de algunas columnas con el menú de columna de la barra de herramientas de DataGrid. Sin embargo, notamos que después de volver a renderizar, vuelve a la configuración de columnas predeterminada, lo cual va en contra de nuestro objetivo de intentar guardar las preferencias del usuario.

   Solución

   Para acceder al estado de DataGrid/estado de visibilidad de las columnas en DataGrid para poder ajustarlo/guardarlo/reutilizarlo más tarde, podemos usar la propiedad apiRef para acceder a la API subyacente del componente DataGrid. Luego podemos llamar al método getState de la API para obtener el estado actual de DataGrid, incluyendo el estado de visibilidad de las columnas.

   Aquí está cómo podemos hacer esto en nuestro código:

   import { DataGrid, GridToolbar } from '@mui/x-data-grid';
   import { useState, useRef } from 'react';
   
   export default function Demo() {
     const [columns, setColumns] = useState([
       { field: 'id', headerName: 'ID', width: 90 },
       { field: 'firstName', headerName: 'Nombre', width: 150 },
       { field: 'lastName', headerName: 'Apellido', width: 150 },
       { field: 'age', headerName: 'Edad', type: 'number', width: 90 },
       { field: 'fullName', headerName: 'Nombre completo', description: 'Esta columna tiene un getter de valor y no es ordenable.', sortable: false, width: 160, valueGetter: (params) => `${params.getValue('firstName') || ''} ${params.getValue('lastName') || ''}`, },
     ]);
   
     // crear una referencia para la API
     const apiRef = useRef(null);
   
     // establecer la referencia cuando el data grid se instancia
     const handleDataGridReady = (params) => {
       apiRef.current = params.api;
     };
   
     // manejar el cambio de visibilidad de las columnas
     const handleColumnsChange = (newColumns) => {
       setColumns(newColumns);
       const gridState = apiRef.current.getState();
       console.log(gridState.columns); // <-- esto mostrará el estado de visibilidad actual de las columnas
     };
   
     return (
       <div style="{{" height:="" 400,="" width:="" '100%'="" }}="">
         <datagrid rows="{rows}" columns="{columns}" pagesize="{5}" rowsperpageoptions="{[5]}" checkboxselection="" disableselectiononclick="" onready="{handleDataGridReady}" components="{{" toolbar:="" gridtoolbar,="" }}="" oncolumnschange="{handleColumnsChange}"></datagrid>
       </div>
     );
   }
   

   En este código, creamos una referencia para api y la establecemos cuando se instancia DataGrid usando handleDataGridReady. Luego, manejamos el cambio de visibilidad de las columnas usando handleColumnsChange y llamamos a getState en apiRef para obtener el estado actual de DataGrid, que incluye el estado de visibilidad de las columnas.

   Con esta solución, podemos acceder al estado de visibilidad de las columnas en DataGrid y guardarlo como preferencias del usuario para uso futuro.

   Conclusión

   Es posible guardar o persistir el estado de las columnas en MUI DataGrid accediendo a la API subyacente del componente DataGrid a través de apiRef. Al usar getState de apiRef, podemos obtener el estado actual de DataGrid, incluyendo el estado de visibilidad de las columnas. Esto nos puede ayudar a guardar las preferencias del usuario y reutilizarlas más tarde.

Comments are closed.