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

score 4 · Answer 1 · answered Sep 26 '20 at 23:29

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

score 1 · Answer 2 · answered Apr 01 '20 at 03:49

1

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

canGroupBy: Boolean

I had a look through the docs here Column Props

answered Apr 01 '20 at 03:49

Rory

77
2
6

score 0 · Answer 3 · answered Aug 19 '20 at 19:13

0

You can use option disableGroupBy: true

{
    Header: 'Last Name',
    accessor: 'lastName',
    disableGroupBy: true, // Updated to
}

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

answered Aug 19 '20 at 19:13

Peter Tran

1

score 0 · Answer 4 · answered Aug 23 '20 at 00:14

0

Use disableGroupBy on the column (an object in your memoized columns array for example).

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

answered Aug 23 '20 at 00:14

lovelikelando

7,593
6
32
50

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

4 Answers4