# Full-width rows "Full-width rows" are rows whose content takes the entire grid width instead of being cell-by-cell - useful for inline editors, banner ads, section dividers, and detail-row expansions. > Live demo: Tree + master/detail - https://svgrid.com/demos/08-tree-and-master-detail/ ## Detail-row API (shipped) Full-width rows are built in via `isDetailRow` + `renderDetailRow`: mark a row as a detail row and it renders as a real full-width `colspan` cell hosting your snippet - a nested grid, a form, timelines, anything. ```svelte row.kind === 'detail'} renderDetailRow={DetailPanel} /> ``` See [Master / detail (nested grids)](https://svgrid.com/docs/help/rows/master-detail/) for the full expand/collapse pattern, and demo `106-detail-rows` for a multi-panel detail. A single sticky footer row is also available via `summary` (off by default): ```svelte ``` It sums a numeric column and counts the rest. Pick a different aggregate per column with that column's own `summary` option (`'avg'`, `'min'`, `'max'`, `'count'`, a custom function), or `summary: false` to leave the cell blank. ## A detail row under its parent Mark the row, render the panel. `isDetailRow` answers "is this one of them", `renderDetailRow` is a snippet that gets the row and its index, and the grid gives it a real `colspan` cell across every column. ```svelte {#snippet DetailPanel(props: { row: Row; rowIndex: number })}
{#each props.row.lines ?? [] as line}
{line}
{/each}
{/snippet} row.kind === 'detail'} renderDetailRow={DetailPanel} /> ``` ## Section dividers are the same mechanism Nothing says a full-width row has to be a detail panel. Interleave marker rows into the data and the same two props give you group headers, banners, or an end-of-list note - no extra API, and sorting still applies to the real rows if you turn it on for the columns that carry values. ```svelte {#snippet Divider(props: { row: Row; rowIndex: number })}
{props.row.label}
{/snippet} row.kind === 'divider'} renderDetailRow={Divider} /> ``` ## See also - [Master / detail (nested grids)](https://svgrid.com/docs/help/rows/master-detail/) - [Grouping](https://svgrid.com/docs/help/rows/row-data/) --- SvGrid is the Svelte 5 data grid (`npm install @svgrid/grid`, MIT). This page: https://svgrid.com/docs/help/rows/full-width-rows/ . All docs: https://svgrid.com/llms.txt