React-Table列隐藏

Question

我在React和Web开发方面还比较新手。

我有一个场景需要在React中创建一个表格，并创建一个框，使其能够显示/隐藏列，以及一个全选复选框，它可以显示或隐藏除了一个"NAME_ID"列之外的所有列。我能够通过使用useTable()钩子和从钩子的解构调用中获取的column.getToggleHiddenProps()方法来实现前面的部分。

但我无法实现第二部分，我知道我们有getToggleHideAllColumnsProps()，但这不允许我排除所需的NAME_ID列。

任何帮助或建议都将是非常棒的！

- Siddharth Chaurasia

Answer 1

这是一种实现的方法。我希望这是一个布尔值，可以传递给Columns对象，但我们尽力而为。

我fork了原始的隐藏列沙盒作为概念验证（中文链接）。相关部分如下：

1. 需要创建自己的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... */ );
})

- toki