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

Posted 2023-04-14

【中文标题】如何使用 Material-UI DataGrid 保存列状态？

【英文标题】：How do I save column state using Material-UI DataGrid?

【发布时间】：2021-10-08 04:14:28

【问题描述】：

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

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

【参考方案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>