# Multi Row Headers
URL: https://pro.rv-grid.com/guides/columns/multi-row-header/
Source: src/content/docs/guides/columns/multi-row-header.mdx
Description: Render spreadsheet-style multi-level headers from nested column groups.
The Multi Row Header plugin renders banded, multi-level headers from the same nested `ColumnGrouping` structure RevoGrid already uses for grouped columns. Use it when shallow leaf columns should fill the unused header depth while deeper branches continue to show stacked group bands.

This is the header-focused feature to use for AG Grid or DevExtreme-style multi-level headers. It is separate from `CellMergePlugin`, which only merges body and pinned data cells.

## Setup

```ts
import { MultiRowHeaderPlugin } from '@revolist/revogrid-pro';

const grid = document.createElement('revo-grid');
grid.plugins = [MultiRowHeaderPlugin];
grid.multiRowHeader = true;
```

## Nested Columns

Define headers with the existing `children` column-group structure. Leaf columns still own data binding, sorting, filtering, editing, templates, and resizing.

```ts
grid.columns = [
  {
    name: 'Group A',
    children: [
      { name: 'Athlete 1', prop: 'athlete' },
      {
        name: 'Group B',
        children: [
          { name: 'Country 1', prop: 'country' },
          {
            name: 'Group C',
            children: [
              { name: 'Sport 1', prop: 'sport' },
            ],
          },
        ],
      },
    ],
  },
];
```

## Header Spanning

By default, shallow leaf headers span unused group rows. This matches the common spreadsheet behavior where a leaf header under a shallower branch fills the remaining vertical header space.

Disable spanning for a single column when you want balanced empty group space above the leaf:

```ts
grid.columns = [
  {
    name: 'Balanced',
    children: [
      {
        name: 'Flat Leaf',
        prop: 'flat',
        suppressSpanHeaderHeight: true,
      },
      {
        name: 'Nested',
        children: [{ name: 'Nested Leaf', prop: 'nested' }],
      },
    ],
  },
];
```

You can also disable spanning for the whole plugin:

```ts
grid.multiRowHeader = {
  spanLeafHeaders: false,
};
```

## Configuration

```ts
grid.multiRowHeader = {
  spanLeafHeaders: true,
};
```

| Option | Default | Description |
| --- | --- | --- |
| `spanLeafHeaders` | `true` | Lets shallow leaf headers fill unused group depth. |

## Compatibility

- Works with nested `ColumnGrouping` definitions.
- Leaf headers keep sorting, filtering, custom templates, and resize behavior.
- Group headers continue through RevoGrid's normal group header render hooks.
- `ColumnCollapsePlugin` can be registered with `MultiRowHeaderPlugin` to add expand/collapse controls to groups.
- Pinned columns can split a group into pinned and unpinned visible bands, matching the behavior used by major data grids.
