How to save state of column hide in Material-UI Datagrid?

Viewed 970

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>
    );

0 Answers
Related