Full-Width Rows
Render a single component across the entire grid width for selected rows — section headers, info banners, embedded panels — instead of column cells.
Full-width rows
Some rows shouldn't be a set of columns — section separators, info banners, embedded panels.
Return true from config.fullWidthRows(row, index) for those rows, and
project a #gcFullWidthRow template; the grid renders that single component across the
entire grid width instead of the normal cells.
The template context is {{ '{' }} $implicit: row, row, rowIndex {{ '}' }} — use
let-row for the row object. Full-width rows still participate in virtual scrolling and
stay pinned to the left edge during horizontal scroll, so the banner is always visible.
When to use it
- Grouping-style section headers driven by the data itself.
- Inline "empty state" or call-to-action rows between data.
- Embedded summaries, charts, or rich content panels.
Section headers, ads, and summary banners get a first-class row type — no cell-hacking required.
Full-width rows stay pinned to the left edge during horizontal scroll — the banner remains visible even when the columns behind it scroll away.
Full-width row API
| Property | Type | Default | Description |
|---|---|---|---|
| config.fullWidthRows | (row, index) => boolean | — | Rows returning true render the full-width template instead of cells. |
| #gcFullWidthRow | ng-template | — | The full-width template projected inside <gridcraft>; context is { $implicit: row, row, rowIndex }. |
| config.trackBy | string | (row) => unknown | — | Keeps section rows stable through paging and data swaps. |