如何使用 Material-UI DataGrid 保存列状态？

【问题标题】：How do I save column state using Material-UI DataGrid?如何使用 Material-UI DataGrid 保存列状态？
【发布时间】：2021-10-08 04:14:28
【问题描述】：

我有多个表，每个表有 19 列。列都是相同的，但显示的数据不同，并且来自外部数据库。我希望用户能够选择他们想要隐藏/显示的列，并将其应用于每个呈现的表格。

我了解使用 Context 来保存状态，这就是我的目标。我想我的问题更多的是“我需要从 Column 组件中保存什么才能保存每列的状态”？

【问题讨论】：

标签： reactjs react-hooks material-ui react-context

【解决方案1】：

这当然是可能的。这是我保存列状态的方法。

我使用了componentsProps 属性和onChange。

这是准确的代码

 <DataGrid
     rows={rows}
     componentsProps={{                     
      preferencesPanel: {
                        onChange: event => {
                            const tempCols = [...columns];
                            //const hideCol = '';'
                            tempCols.forEach((col, i) => {
                                if (col.field === event.target.name) {
                                    tempCols[i].hide = !tempCols[i].hide;
                                    //  hideCol = hideCol.concat(col.field + ',');
                                }
                            });
                            setColumns(tempCols);
                        }
                    }

 />
 
 <Button color="primary" onClick={() => 
        methodNametoSavestate(columns)}>
                    Save as preference
                </Button>

【讨论】：