使用钩子自动扩展行和子行反应表

Question

这里我有使用钩子的反应表代码，我在任务上遇到了困难，当我打开页面时，我需要设置默认展开的所有行和子行，我尝试了几种解决方案，但它们都不起作用。

代码链接：https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/expanding

Answer 1

正如我所说，选项

initialState.expanded

允许您扩展所需的行。

useTable(
    {
      columns: userColumns,
      data,
      initialState: {
        expanded: { "0": true, "2": true }
      }
    },
    useExpanded // Use the useExpanded plugin hook
  )

这将展开第一行和第三行。

Answer 2

我不确定这在 4 年多后是否仍然相关，但在最新的 MRT V2 中你可以简单地说：

initialState: {
  expanded: true
},

就像您的所有行/子行将开始展开一样。无需对数据进行笨拙的循环和此类必要的黑客攻击。

与此同时，codesandbox 更改为 https://codesandbox.io/p/devbox/github/TanStack/table/tree/main/examples/react/expanding

享受吧！