Aligned Grids

One name, on both grids

Set alignGroup to the same string on every grid you want to keep together:

readonly config: GridConfig = { alignGroup: 'sales' };

That is the whole API. You do not point one grid at the other, and there is no order to declare them in. Grids in different components join the same group as easily as siblings do.

What follows, and what does not

Column width, order, pin and hidden state stay the same in every grid in the group, and the grids scroll sideways together. Drag a column border in the totals grid and the grid above it moves with you.

Rows are left alone. Sorting, filtering, selection and vertical scrolling stay private to each grid — the second grid usually shows different rows, so sorting it by Q2 would mean something else entirely.

Neither grid is in charge

The grid you touched leads and the rest follow, whichever one that is. A grid that renders later adopts the layout the group already has instead of imposing its own, so a grid inside a tab or an @if cannot reset the one already on screen. It picks up the group's sideways scroll position at the same moment, so it never arrives offset from the grids it is meant to line up with. The switch above the grids does exactly that — hide the totals grid, move the columns around, scroll sideways, then bring it back.

When the columns are not the same

Grids that declare different column keys align on the keys they share. A column the other grid does not have keeps its own width and its own position — it is never pushed aside to make room for a layout that never mentioned it.

A column's own minWidth still wins. If one grid declares a wider floor for a shared column, the whole group settles on that floor rather than letting the two draw it at different widths.

Sizing the columns automatically

autoSizeStrategy: { type: 'fitGridWidth' } works with a group, and the layouts settle — but each grid fits to its own container, and the group can only hold one set of widths. Where the containers differ, the group ends up on the narrowest one, so the wider grid does not fill its space. Give linked grids containers of the same width, or size the columns yourself.