I have a fairly simple datagrid table with the option to hide/show specific columns. I want to save the state of the columns when a rerender occurs (in my case when data add to dataGrid). Actually when data comes from server and add to row then the filter of column disable automatically instead of hide column.
The code of component is here:
const columns = [
{ field: 'sensortype', headerName: 'Type', width: 130 },
{ field: 'height', headerName: 'Height', width: 130 },
{ field: 'width', headerName: 'Width', width: 130 },
{
field: 'altitude',
headerName: 'Alt',
width: 130,
},
];
let row = null;
let rowss = [];
{logs && logs.length && logs.map((log, index) => (
row = {
id: index ,
sensortype: log && log[0] && log[0].sensorTypeLatinName,
height: log && log[0] && log[0].longitude,
width: log && log[0] && log[0].latitude,
altitude: log && log[0] && log[0].altitude
},
rowss.push(row),
console.log(rowss)
))}
const list = anchor => (
<div className={clsx(classes.list, { [classes.fullList]: anchor === "bottom", })} role="presentation">
<div className="log-container p-4">
{state.bottom && type == "target" ? (
<React.Fragment>
<div style={{ height: 220, width: '100%' }} className={classes.root}>
<DataGrid rows={rowss} columns={columns} components={{Toolbar: GridToolbar, LoadingOverlay: CustomLoadingOverlay,}}
loading
pageSize={100} hideFooter hideFooterPagination />
</div>
</React.Fragment>
)}
</div>
</div>
);