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

Question

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

我理解使用上下文来保存状态，这就是我学习的地方。我想我的问题更多的是"为了保存每个列的状态，我需要从Column组件中保存什么"?

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>