反应表列隐藏答案

【问题标题】：React-Table Column Hiding反应表列隐藏
【发布时间】：2021-04-03 08:59:56
【问题描述】：

总的来说，我对 React 和 Web 开发有点陌生。

我有一个场景，要在 react 中创建一个表，并创建一个框，该框将 能够显示/隐藏 列，并与它一起选择所有复选框，它将显示或隐藏所有列除了 “NAME_ID”列。我可以使用 useTable() 钩子和 column.getToggleHiddenProps() 方法从钩子的解构调用中实现前面的部分。

但我无法完成第二部分，我知道我们有 getToggleHideAllColumnsProps() 但这不允许我除了必需的 NAME_ID 列。

任何帮助或建议都会很棒！。

【问题讨论】：

标签： reactjs react-table-v7

【解决方案1】：

有一种方法可以做到这一点。我希望这是一个传递给 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... */ );
})

【讨论】：