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

Question

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

我了解使用上下文(Context)来保存状态，我正在倾向于这种方法。我的问题更多的是“从Column组件中需要保存什么信息，以保存每个列的状态？”

- Ayman Alqaq

Answer 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>

- pravin kottawar