reactjs - 如何在 React Table 上显示和隐藏某些列?
问题描述
我创建了一个反应表。我想通过用户操作隐藏或显示表中的某些列。默认情况下,所有列都应该可见,但我们将有一些复选框来隐藏或显示某些列。
假设我想显示 8 列中的 4 列。请建议我一种简单的技术来实现这一点。
我的列标题数组是
const columns = [
{
Header: 'Column 1',
columns: [
{
Header: 'S Column 1',
accessor: 'firstName'
}
]
},
{
Header: 'Column 2',
columns: [
{
Header: 'S Column 2',
accessor: 'firstName'
}
]
},
{
Header: 'Column 3',
columns: [
{
Header: 'S Column 3',
accessor: 'firstName'
}
]
},
{
Header: 'Column 4',
columns: [
{
Header: 'S column 4',
accessor: 'firstName'
}
]
},
{
Header: 'Column 5',
columns: [
{
Header: 'S column 5',
accessor: 'firstName'
}
]
},
{
Header: 'Column 6',
columns: [
{
Header: 'S column 6a',
accessor: 'firstName'
},
{
Header: 'S column 6b',
accessor: 'firstName'
},
{
Header: 'S column 6c',
accessor: 'firstName'
},
{
Header: 'S column 6d',
accessor: 'firstName'
}
]
},
{
Header: 'Column 7',
columns: [
{
Header: 'S column 7',
accessor: 'firstName'
}
]
},
{
Header: 'Column 8',
columns: [
{
Header: 'S Column 8a',
accessor: 'firstName'
},
{
Header: 'S Column 8b',
accessor: 'firstName'
},
{
Header: 'S Column 8c',
accessor: 'firstName'
},
{
Header: 'S Column 8d',
accessor: 'firstName'
}
]
},
];
请帮助我通过最简单的技术实现此功能。
如果可以的话,你可以在代码沙盒上展示一个演示。
解决方案
在列中有一个属性show
。
show: true, // can be used to hide a column
.
使其为 false 以隐藏特定列。将用户的复选框值保持在状态中。
https://react-table.js.org/#/story/readme
注意:不推荐使用 column 属性show
。改为使用initialstate.hiddenColumns
。
检查:https ://github.com/tannerlinsley/react-table/issues/1804
推荐阅读
- c# - 折线图自动间隔
- python - Pygame 游戏菜单找到矩形位置
- casting - 如何从一种切片类型转换为另一种切片类型?
- python - 如何在给定 DNN 的情况下获得 X_test 的预测?
- mysql - 使用 Golang 进入嵌套结构的 SQL 查询结果
- firebase - 使用 firebase serve --only 函数在本地服务时的 Firebase Functions 配额
- javascript - 如何在 Vue.js 中要求一个插槽?
- api - 根据 api,Baremetal 在 dal10 中不可用
- mysql - 从 Google Dataflow 连接到 MySQL
- python - 组合两个列表 python 列表中的每个元素