Re: Help with MUI X Data Grid Column State Issue on Re-render

Hi there,

I totally understand your frustration with the MUI X Data Grid reverting column states on re-renders. I faced a similar issue in my project, and I found a couple of ways to manage the column state effectively.

One approach is to use local state (like React’s `useState` or a state management library) to keep track of the visibility and sorting of your columns. You can use the `onColumnVisibilityChange` and `onSortModelChange` props to update your state whenever these properties change:

            
import React, { useState } from 'react';
import { DataGrid } from '@mui/x-data-grid';

const MyDataGrid = () => {
    const [columnVisibility, setColumnVisibility] = useState({});
    const [sortModel, setSortModel] = useState([]);

    return (
         setColumnVisibility(newVisibility)}
            sortModel={sortModel}
            onSortModelChange={(model) => setSortModel(model)}
        />
    );
};
            
        

With this setup, the visibility and sorting state will persist even when the component re-renders.

Another option is to consider using local storage or session storage to persist this state across sessions. You can save the column visibility and sort model whenever they change and retrieve them when the component mounts.

Hope this helps! Let me know if you have any further questions or if you need more detailed examples.

Best of luck with your project!