# Row height and pinned rows

Row height, top/bottom pinned rows, full-width rows, and merged cells are separate layout features. Choose based on whether you need persistent summaries or wide detail content.

Canonical: https://grid.syidax.com/docs/features/row-layout/

<a id="understand"></a>

## How it works and when to use it

Pinned rows use separate data. They are not automatic totals; to update totals after filtering or editing, supply newly calculated values from your app.

In the code, grid is the Grid element prepared in the installation chapter. Check each example's data and settings, and implement the app functions and server endpoints for your project.

- [Installation and integration · Shared sample data](https://grid.syidax.com/docs/guides/getting-started.md)

<a id="example-1"></a>

## Example 1. Pin a bottom summary row

Calculate total quantity across the current data and display it in a separate row.

```javascript
const quantity = grid.rowData.reduce((sum, row) => sum + Number(row.quantity || 0), 0);
grid.pinnedBottomRowData = [{ id: 'SUMMARY', product: 'Total quantity', quantity }];
```

Verify the result: The summary row remains while scrolling. This calculation uses all rowData, not the filtered result.

<a id="example-2"></a>

## Example 2. Readable row heights

Offer a setting in your app for users to change row density.

```javascript
grid.rowHeight = 44;
await grid.refreshRowHeights();
```

Verify the result: The layout reflects the new row heights. With automatic height, also inspect wrapping and cell content.

<a id="example-3"></a>

## Example 3. Diagnose spans, full-width rows, and pinning together

When combining structural features on the same data, query the actual applied result.

```javascript
console.log(await grid.getPinnedRows());
console.log(await grid.getFullWidthRowInfo());
```

Verify the result: Inspect which data uses full-width rows and pinned areas. For detailed span behavior, follow the argument contracts of getCellSpan and getSpanInteraction.

<a id="pitfalls"></a>

## Combining features and troubleshooting

Merged boundaries change with sorting and filtering. Review both displayed ranges and merge handling during copying and export.

Do not assume regular column editing applies unchanged to full-width rows. If a layout is rejected, read reports such as rowLayoutRefused and resolve the cause.

<a id="related-api"></a>

## APIs used by this feature

- [spanExportMode](https://grid.syidax.com/docs/options/spanExportMode.md) — Chooses whether merged-cell copying and output include the origin value once or repeat it at every position.
- [alignedGrids](https://grid.syidax.com/docs/options/alignedGrids.md) — Specifies linked Grids for synchronized column layouts and related state. Inspect connection results and cycle restrictions in aligned Grid reports.
- [isFullWidthRow](https://grid.syidax.com/docs/options/isFullWidthRow.md) — Determines whether a row uses a full-width layout instead of individual column cells.
- [fullWidthCellRenderer](https://grid.syidax.com/docs/options/fullWidthCellRenderer.md) — Renderer for full-width row content. Uses a different input contract from regular cell renderers.
- [fullWidthRowHeight](https://grid.syidax.com/docs/options/fullWidthRowHeight.md) — Fixed height or per-row height function for full-width rows.
- [pinnedTopRowData](https://grid.syidax.com/docs/options/pinnedTopRowData.md) — Row data pinned above the scrolling table.
- [pinnedBottomRowData](https://grid.syidax.com/docs/options/pinnedBottomRowData.md) — Row data pinned below the scrolling table.
- [rowSpan](https://grid.syidax.com/docs/columns/rowSpan.md) — Returns the vertical row span from cell context. Inspect span reports for conflicts and display-model restrictions.
- [colSpan](https://grid.syidax.com/docs/columns/colSpan.md) — Returns the horizontal column span from cell context. Account for pinned boundaries and hidden columns.
- [setAlignedGrids](https://grid.syidax.com/docs/methods/setAlignedGrids.md) — Configures aligned Grid connections and returns the result.
- [getAlignedGrids](https://grid.syidax.com/docs/methods/getAlignedGrids.md) — Reads connected Grids and alignment state.
- [getFullWidthRowInfo](https://grid.syidax.com/docs/methods/getFullWidthRowInfo.md) — Reads one full-width row's information, or the complete layout report when no argument is supplied.
- [setPinnedRows](https://grid.syidax.com/docs/methods/setPinnedRows.md) — Sets top/bottom pinned row data and returns the application result.
- [getPinnedRows](https://grid.syidax.com/docs/methods/getPinnedRows.md) — Reads current pinned row data as a report.
- [getPinnedRowInfo](https://grid.syidax.com/docs/methods/getPinnedRowInfo.md) — Reads details of a specified pinned row.
- [getRowSpan](https://grid.syidax.com/docs/methods/getRowSpan.md) — Reads calculated vertical span ranges.
- [getCellSpan](https://grid.syidax.com/docs/methods/getCellSpan.md) — Reads horizontal and vertical span information for a cell.
- [getSpanInteraction](https://grid.syidax.com/docs/methods/getSpanInteraction.md) — Inspects how merged cells interact with selection, copying, and related actions.
- [spanConflict](https://grid.syidax.com/docs/events/spanConflict.md) — Emitted when cell spans conflict with other ranges or layouts.
- [pinnedRowsChanged](https://grid.syidax.com/docs/events/pinnedRowsChanged.md) — Emitted when top/bottom pinned row data changes.
- [rowLayoutRefused](https://grid.syidax.com/docs/events/rowLayoutRefused.md) — Emitted when a requested row layout cannot be applied. Adjust the combination according to the rejection reason.

<a id="next"></a>

## Related reading

- [How rows, columns, and IDs relate](https://grid.syidax.com/docs/guides/concepts.md)
- [Connect results and events](https://grid.syidax.com/docs/guides/data-event-access.md)
- [Explore in Features](https://grid.syidax.com/grid/row-layout) — The guide describes which interactions are available to try.