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

问题描述

我正在寻找一种简单而干净的方法来使所有行在使用 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

解决方法

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

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