我有多个表格,每个表格都有19列。这些列都是相同的,但显示的数据不同,来自外部数据库。我希望用户能够选择隐藏/显示哪些列,并将其应用于呈现的每个表格。
我了解使用上下文(Context)来保存状态,我正在倾向于这种方法。我的问题更多的是“从Column组件中需要保存什么信息,以保存每个列的状态?”
我有多个表格,每个表格都有19列。这些列都是相同的,但显示的数据不同,来自外部数据库。我希望用户能够选择隐藏/显示哪些列,并将其应用于呈现的每个表格。
我了解使用上下文(Context)来保存状态,我正在倾向于这种方法。我的问题更多的是“从Column组件中需要保存什么信息,以保存每个列的状态?”
这是完全可能的。
以下是我保存列状态的方法。
我使用了 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>