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.

defining-column-groups

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.

defining-columns-with-groups

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

View Mode

Fork Fork

import { InfiniteTable, DataSource } from '@infinite-table/infinite-react';
import type {
  InfiniteTableColumn,
  InfiniteTableColumnGroup,
} from '@infinite-table/infinite-react';
import * as React from 'react';

import { Person, data } from './column-groups-data';

const columnGroups: Record<string, InfiniteTableColumnGroup> = {
  'contact info': { header: 'Contact info' },

  street: { header: 'street', columnGroup: 'address' },
  location: { header: 'location', columnGroup: 'address' },
  address: { header: 'Address' },
};

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

  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' },
};

export default function App() {
  return (
    <DataSource<Person> data={data} primaryKey="id">
      <InfiniteTable<Person>
        columnGroups={columnGroups}
        columnDefaultWidth={130}
        columnMinWidth={50}
        columns={columns}
      />
    </DataSource>