如何使用react-table 7 最初自动扩展所有行？

Question

我正在寻找一种简单而干净的方法来使所有行在使用react-table v7时自动扩展。

当我将所有数据映射到true并将其设置为初始状态时，它不会扩展我的行。

const expanded = {
  1: true,
  2: true,
  ...
};

...

useTable(
  {
    ...
    initialState: {
      expanded
    }
  }
);

通过转储表状态expanded道具，我发现生成了非数字键，例如{Col1:somevalue2: true}（分组列）。在创建表实例之前，我无权访问这些键，因此我也无权访问行 id 来生成初始状态。

我发现的唯一方法如下，但我更喜欢最初扩展 tableInstance （作为useTable()钩子的结果）。

React.useEffect(() => tableInstance.toggleAllRowsExpanded(true), []);

相关Github FR讨论：https://github.com/tannerlinsley/react-table/discussions/3317

Answer 1

根据文档的内容，您所写的内容具有直观意义，但缺少一个关键元素。您必须告诉initialState您的“扩展”对象与“扩展”属性相关联，如下所示：

  const initialExpanded = React.useMemo(() => {
    return {
      "expanded": {
        "0": true,
        "4": true
      }
  }}, [])
  const { /* ... */ } = useTable({
    initialState: { initialExpanded }, 
    /* etc */
  });