如何在React-Table V7中禁用一列的分组功能

Question

我在这个官方codesandbox上使用了react-table的示例。

列的代码如下：

const columns = React.useMemo(
    () => [{
            Header: 'Name',
            columns: [{
                    Header: 'First Name',
                    accessor: 'firstName',
                    // Use a two-stage aggregator here to first
                    // count the total rows being aggregated,
                    // then sum any of those counts if they are
                    // aggregated further
                    aggregate: ['sum', 'count'],
                    Aggregated: ({
                        cell: {
                            value
                        }
                    }) => `${value} Names`,
                },
                {
                    Header: 'Last Name',
                    accessor: 'lastName',
                    // Use another two-stage aggregator here to
                    // first count the UNIQUE values from the rows
                    // being aggregated, then sum those counts if
                    // they are aggregated further
                    aggregate: ['sum', 'uniqueCount'],
                    Aggregated: ({
                        cell: {
                            value
                        }
                    }) => `${value} Unique Names`,
                },
            ],
        },
        ...
    ],
    []
)

如何禁用分组，例如“姓氏”列？我尝试了以下代码：

{
    Header: 'Last Name',
    accessor: 'lastName',
    disableGrouping: true, // This line
},

但是disableGrouping不起作用。

最好的问候

- user1665355

Answer 1

返回所有标题的单个数组。

// Before
    const columns = React.useMemo(
    () => [{
        Header: "Name",
        columns: [
          {
            Header: "First Name",
            accessor: "firstName",
          },
          {
            Header: "Last Name",
            accessor: "lastName",
          },
        ],
      },
      {
        Header: "Info",
        columns: [
          {
            Header: "Age",
            accessor: "age",
          },
        ],
      }],
    []
  );



// After
    const columns = React.useMemo(
    () => [{
            Header: "First Name",
            accessor: "firstName",
          },
          {
            Header: "Last Name",
            accessor: "lastName",
          },
          {
            Header: "Age",
            accessor: "age",
          }],
    []
  );

- Prince Sodhi

Answer 2

我认为这可能是你要找的那个：

canGroupBy: Boolean

我已经查看了这里的文档 列属性

- Rory

Answer 3

在编程中，可以使用disableGroupBy属性来禁用分组操作，例如在您的记忆化columns数组中的某一列对象上。

https://react-table.tanstack.com/docs/api/useGroupBy#column-properties

- garrettmaring

Answer 4

您可以使用选项 disableGroupBy: true

{
    Header: '姓氏',
    accessor: 'lastName',
    disableGroupBy: true, // 已更新
}

参考资料：https://react-table.tanstack.com/docs/api/useGroupBy#column-options

- Peter Tran