Column Groups

Specify column groups via the controlled columnGroups (or uncontrolled defaultColumnGroups) prop.

The value is an object, with keys being the group id and value being the group description.

const columnGroups: Record<string, InfiniteTableColumnGroup> = {
  'contact info': { header: 'Contact info' },
  // `street` column group belongs to the `address` columnGroup
  street: { header: 'street', columnGroup: 'address' },
  location: { header: 'location', columnGroup: 'address' },

  // this is a top-level group
  address: { header: 'Address' }
}

A column group can have a parent column group, specified by the columnGroups.columnGroup property. The same goes for a column - columns can have columnGroup as well.

const columns: Record<string, InfiniteTableColumn<Person>> = {
  id: { field: 'id' },

  // `streetNo` column belongs to the `street` columnGroup
  streetNo: { field: 'streetNo', columnGroup: 'street' },
  city: { field: 'city', columnGroup: 'location' },

  streetName: { field: 'streetName', columnGroup: 'street' },
  firstName: { field: 'firstName' },

  country: { field: 'country', columnGroup: 'location' },
  region: { field: 'region', columnGroup: 'location' },

  email: { field: 'email', columnGroup: 'contact info' },
  phone: { field: 'phone', columnGroup: 'contact info' },
};

Column groups in action#

loading demo…