TanStack Table实现单行展开的最佳实践

在React表格组件开发中，TanStack Table（原React Table）是一个功能强大的库，它提供了丰富的表格功能包括行展开功能。本文将深入探讨如何实现"每次只展开一行"的交互效果，这是许多业务场景中的常见需求。

行展开的基本原理

TanStack Table通过expanded状态来控制行的展开状态。这个状态是一个对象，其中键是行ID，值表示该行是否展开。默认情况下，表格允许多行同时展开，这在某些场景下可能不符合产品需求。

单行展开的实现方案

方案一：简洁版实现

最简洁的实现方式是直接通过setExpanded方法控制展开状态：

onClick: () => table.setExpanded({ [row.id]: !row.getIsExpanded() })

这种方法会完全替换当前的展开状态，确保任何时候只有一行是展开的。当点击已展开的行时，它会收起；点击其他行时，会收起当前行并展开新点击的行。

方案二：支持子行展开的增强版

如果需要保留子行的多级展开功能，同时限制顶级行只能单行展开，可以采用以下方案：

onClick: () => {
  const state = table.getState();
  const expanded = structuredClone(state.expanded);
  
  // 如果是子行，保持原有逻辑
  if (row.id.includes('.')) {
    expanded[row.id] = !row.getIsExpanded();
    table.setExpanded(expanded);
    return;
  }
  
  // 如果是顶级行，只允许展开一行
  table.setExpanded(row.getIsExpanded() ? {} : { [row.id]: true });
}

这个实现通过检查行ID是否包含点号(.)来判断是否为子行，对子行保持原有的多行展开逻辑，而对顶级行强制单行展开。

性能考量

在大型表格中，频繁克隆和设置展开状态可能会影响性能。建议：

1. 对于纯前端渲染的表格，上述方案性能影响可以忽略
2. 对于服务端分页的表格，确保只传递必要的展开状态到服务器
3. 考虑使用useMemo优化展开状态的派生计算

用户体验优化

实现单行展开时，还可以考虑以下用户体验增强：

1. 添加动画效果使展开/收起更平滑
2. 在行点击区域添加视觉反馈
3. 对于触屏设备，考虑增加点击区域大小
4. 提供展开/收起的ARIA标签，增强可访问性

总结

TanStack Table提供了灵活的行展开控制机制，通过合理设置expanded状态，开发者可以轻松实现单行展开或多级展开的混合模式。根据具体业务需求选择适合的实现方案，既能满足产品需求，又能保证良好的用户体验。

在实际项目中，建议将行展开逻辑封装成自定义hook，便于在不同表格组件间复用，同时保持代码的一致性和可维护性。