How to disable grouping on one column in react-table V7

Question

I use the react-table example at this official codesandbox.

The code for columns is like this:

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`,
                },
            ],
        },
        ...
    ],
    []
)

How could one disable grouping for i.e. Last Name column? I tried:

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

But disableGrouping does not work.

Best Regards

Answer 1

Return all headings as a single array.

// 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",
          }],
    []
  );

Answer 2

I think this could be the one you are looking for:

canGroupBy: Boolean

I had a look through the docs here Column Props