如何最初使用 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 */
  });