如何解决反应表列隐藏
总的来说,我对 React 和 Web 开发有点陌生。
我有一个场景,在 react 中创建一个表,并创建一个框,该框可以显示/隐藏 列 ,以及一个选中所有复选框,以显示或隐藏所有列除了“NAME_ID”列。
我可以使用 useTable()
hook 和 column.getToggleHiddenProps()
方法从 hook 的解构调用中实现前面的部分。
但我无法完成第二部分,我知道我们有 getToggleHideAllColumnsprops()
但这不允许我除了必需的 NAME_ID 列。
任何帮助或建议都会很棒!!
解决方法
有一种方法可以做到这一点。我希望这是一个传递给 Columns 对象的布尔值,但我们取的是我们能得到的。
I forked the original Hidden Columns sandbox as a proof of concept. 相关部分是:
- 您需要创建自己的 onClick 处理程序,而不是使用默认的
getToggleHideAllColumnsProps
道具。column
公开了一个toggleHidden
方法,该方法指示用户尝试切换特定列时的行为。有点令人沮丧的是,即使您为列实现了toggleHidden
方法,getToggleHideAllColumnsProps
也会完全忽略它,并且无论如何都会切换其隐藏状态。
<div>
<IndeterminateCheckbox
onClick={() => allColumns.forEach(c => c.id !== "firstName" && c.toggleHidden())}
/>
Toggle All
</div>
幸运的是,这是一个相当简单的函数——只需遍历您的 columns
对象并在每个对象上调用 toggleHidden
。为了稳健起见,我无论如何都检查了在所需列上调用它的情况,但从技术上讲,您不需要这样做。
- 不知何故,您需要为所需的列定义
toggleHidden
函数。我在复选框的渲染方法中做了它,但如果你在其他地方做它,它的工作原理是一样的。当为列定义toggleHidden
函数时,它会按预期覆盖默认行为。因此,您可以只使用一个返回 null 的空函数,这将禁用手动关闭该列的能力。
allColumns.map((column) => {
if (column.id === "firstName") {
column.toggleHidden = () => null;
}
return ( /* ...jsx... */ );
})
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。