React Table列显隐开发：如何实现排除NAME_ID列的全选复选框功能

核心逻辑说明 #

默认通过useTable拿到的getToggleHideAllColumnsProps()方法，内部会遍历表格下的所有列批量切换显隐状态，无法跳过需要固定展示的NAME_ID列，因此不需要强行修改这个内置方法，只需要把全选操作的管控范围单独限定在可调整的列集合内，就能完全保证固定列的显示状态不受全选操作影响。

具体实现步骤 #

• 给固定列增加识别标记
  在表格的列配置定义中，给NAME_ID对应的列对象增加自定义属性（比如disableHiding: true），后续所有显隐相关的逻辑都通过这个属性识别固定列，避免直接硬编码列名导致的逻辑维护困难。
• 单独计算全选复选框的状态
  从useTable解构得到的allColumns集合中，先过滤出所有支持显隐控制的列，排除固定列后再计算全选框的勾选状态，不要基于全量列的状态做判断：

  // 过滤出可管控的列集合，排除固定列
  const controllableColumns = allColumns.filter(col => !col.disableHiding)
  // 仅基于可管控列的状态，计算全选框的勾选值
  const isAllColumnsVisible = controllableColumns.every(col => !col.hidden)
  

• 手写全选的批量切换事件
  不要直接绑定getToggleHideAllColumnsProps()返回的事件属性，自行实现点击处理函数，只对筛选出的可管控列执行状态切换，全程不读取、不修改NAME_ID列的显隐属性：

  const onToggleAllControllableColumns = () => {
    // 以当前状态为基准，确定所有可管控列的目标显隐状态
    const targetHidden = !isAllColumnsVisible
    controllableColumns.forEach(col => {
      // 调用列实例自带的toggleHidden方法修改对应列的状态
      col.toggleHidden(targetHidden)
    })
  }
  

  绑定复选框时，直接把计算得到的isAllColumnsVisible作为勾选状态值，把onToggleAllControllableColumns作为点击回调即可。

落地注意事项 #

• 之前已经实现的单独立项列显隐控制逻辑不需要做任何修改，每个可管控列绑定的column.getToggleHiddenProps()本来就只操作当前列的状态，和全选逻辑不会互相干扰。
• 因为全选逻辑的遍历范围从一开始就排除了固定列，不存在误修改NAME_ID列hidden属性的可能，完全符合“全选操作不影响该列显示状态”的要求。
• 后续如果需要新增其他固定展示的列，只需要在对应列的配置上加上disableHiding: true标记即可，不需要调整全选逻辑的代码。

内容的提问来源于stack exchange，提问作者Siddharth Chaurasia