developer guide
Aligned Grids: Shared Columns Across Grids
Two grids can share their column layout and horizontal scrolling, so resizing or reordering in one moves the other with it. That is what makes a fixed summary above a scrolling detail table line up, instead of drifting the first time anyone drags a column edge.
Developer guide › Columns and cell rendering › Aligned Grids: Shared Columns Across Grids
Aligned grids
Two or more grids that read as one table split into sections: a summary band above a detail grid, two datasets side by side under identical columns, a frozen top section that is genuinely different data rather than a pinned row.
A summary band above a detail grid
const summary = createGrid(top, { columns, rows: totals });
const detail = createGrid(bottom, { columns, rows, alignedGrids: [summary] });Declare it on the grid you create last, since that is the only one that can name the others. The link is peer-based once made: whichever grid the user resizes is the one the others follow.
| Shared | Independent |
|---|---|
| Column widths and flex | Sort |
| Column order | Filters |
| Column visibility | Selection |
| Pinning | Grouping and totals |
| Horizontal scroll | Vertical scroll, and the rows themselves |
What is not shared is the design. If sort, filters and selection travelled too, this would not be a feature, it would be one grid with extra steps. The reason to have two is that the sections hold different data, so each keeps its own view of it.
Vertical scroll stays independent for the same reason: the grids hold different numbers of rows, and yoking them would make the shorter one run out.
A column one grid has and another does not is skipped rather than invented, and nothing checks that the column sets match: aligning grids with different columns is a caller error that produces a visibly wrong result rather than a silent one. Destroying any grid releases its link and leaves the rest working.