# Column Groups

> Columns can be grouped with multiple levels of nesting thus making Infinite Table DataGrid a powerful tool for data analysts

Canonical page: https://infinite-table.com/docs/learn/columns/column-grouping

Specify column groups via the controlled [`columnGroups`](https://infinite-table.com/docs/reference/infinite-table-props.md#columnGroups) (or uncontrolled [`defaultColumnGroups`](https://infinite-table.com/docs/reference/infinite-table-props.md#defaultColumnGroups)) prop.

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

```tsx title="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`](https://infinite-table.com/docs/reference/infinite-table-props.md#columnGroups.columnGroup) property. The same goes for a column - columns can have [columnGroup](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.columnGroup) as well.

```tsx title="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

**Example**

```tsx files=["column-groups-example.page.tsx","column-groups-data.ts"]

```