Как сохранить состояние скрытия столбца в сетке данных Material-UI?

#javascript #reactjs #material-ui

Вопрос:

У меня есть довольно простая таблица datagrid с возможностью скрывать/показывать определенные столбцы. Я хочу сохранить состояние столбцов при повторной передаче (в моем случае, когда данные добавляются в сетку данных). На самом деле, когда данные поступают с сервера и добавляются в строку, то фильтр столбца автоматически отключается вместо скрытия столбца.

Код компонента находится здесь:

     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 amp;amp; logs.length amp;amp; logs.map((log, index) => (

            row = {
                        id: index ,
                        sensortype: log amp;amp; log[0] amp;amp; log[0].sensorTypeLatinName, 
                        height:  log amp;amp; log[0] amp;amp; log[0].longitude,
                        width:  log amp;amp; log[0] amp;amp; log[0].latitude,
                        altitude: log amp;amp; log[0] amp;amp; 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 amp;amp; 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>
    );