SYIDAX / DATA GRID

Row height and pinned rows

Express data structure through row heights, pinned rows, and cell spans.

Get started
Row height and pinned rowsSample order data
120 rows
Loading Grid…

Options

Changes below update the Grid and code immediately.

Latest result

Inspect the summary row at the bottom, displayed separately from regular orders.

View code
Current preview

Usage guide

#

Use this to keep summary rows visible while scrolling or increase row spacing for readability.

Try it yourself

  1. Find the pinned summary row

    Inspect the summary row at the bottom, displayed separately from regular orders.

  2. Check while scrolling

    Scroll down inside the table. The summary row remains separate from the list.

  3. Compare row spacing

    Under Data and display, change row spacing to 28px or 44px. The number of orders visible at the same height changes.

Expected results

The summary stays pinned while the selected row spacing applies to the order list.

This summary uses fixed sample values, not automatic order totals. Cell spans and full-width rows require separate column/row settings.

Useful terms

pinnedBottomRowData
Row data displayed at a fixed position below the table.
rowHeight
Each row's height in pixels.

Key API examples

Application code that references the registered Grid element as grid.

grid.pinnedBottomRowData = [{id:'SUMMARY',product:'Summary',quantity:120}];

API reference

#

Other properties7
Attribute / PropertyType / DefaultDescription
spanExportMode
'origin-once' | 'repeat'Default: 'origin-once'(PF-ROWLAYOUT-WIRING-01 batch A) — how a copied / exported range prints a spanned cell: `origin-once` (the value once, at the origin, and blanks under the cover — the spreadsheet convention) or `repeat` (the value in every covered coordinate). Only matters when a column declares `rowSpan` / `colSpan`.
alignedGrids
SyGridAlignedGridsInput | stringDefault: undefinedthe alignment group: a group NAME (attribute-friendly; every grid naming the same group aligns), an array of peer `<sy-grid>` elements (sugar: this element mints a group from its own member id and configures every peer onto it), or `null` to leave.
isFullWidthRow
(params: { row: GridRow; rowIndex: number; builtInKind: 'detail' | 'group' | 'group-footer' | 'loading' | 'custom' | null }) => booleanDefault: undefinedmarks a data row full-width (AG `isFullWidthRow`); grid-owned kinds win (`kind-conflict`).
fullWidthCellRenderer
SyGridFullWidthRenderer<GridRow>Default: undefinedthe full-width renderer: `create` returns an element (or `{ gui }`); `refresh`/`destroy` follow the Phase C renderer law.
fullWidthRowHeight
number | ((row: GridRow, rowIndex: number) => number)Default: undefinedthe full-width row height (px, or a per-row function); the uniform row height otherwise.
pinnedTopRowData
GridRow[]Default: undefinedrows pinned above the viewport (AG `pinnedTopRowData`; ids via `getRowId`, else `__pinned-top-<i>`).
pinnedBottomRowData
GridRow[]Default: undefinedrows pinned below the viewport (AG `pinnedBottomRowData`).
Events3
EventsDetail typeDescription
SyGridSpanConflictEventDetaila `spanConflict` fires once per distinct conflict set a render pass resolves.
SyGridPinnedRowsChangedDetail<GridRow>the pinned model changed (`setPinnedRows`, the two props, a state restore).
SyGridRowLayoutRefusedDetaila row-layout feature refused a request instead of silently no-oping.
Methods9
Method / ArgumentsReturn typeDescription
input: SyGridAlignedGridsInput
Promise<SyGridAlignedGridsResult>join a group (name), configure peers (array sugar), or leave (`null`); the orchestration is chunk-side .
Promise<SyGridAlignedGridsReport>the group as this member sees it; an unconfigured grid answers without loading anything.
rowIndex?: number
Promise<SyGridFullWidthRowInfo<GridRow> | SyGridFullWidthLayoutReport | null>what a display row is under the full-width layout (or the layout report when the index is omitted).
input: SyGridPinnedRowSetInput<GridRow>
Promise<SyGridPinnedRowsResult<GridRow>>replace the pinned set atomically .
Promise<SyGridPinnedRowsReport<GridRow>>the pinned rows, the composed counts, the dangling / colliding ids and the policy matrix.
displayIndex: number
Promise<SyGridPinnedRowInfo<GridRow> | null>what a COMPOSED display index (`top ++ center ++ bottom`) holds.
colId: string
Promise<SyGridRowSpanReport | null>the full-list row-span layout of one column: what the paint uses, including every rejection (invalid answers, thrown callbacks, clamps at a section / list end / the facade cap) and the cache stats. `null` for an unknown column; `status` says why nothing spans.
rowIndex: number, colId: string
Promise<SyGridCellSpanInfo | null>the resolved rectangle at one coordinate: origin, spans, whether the coordinate is covered by another cell, the pixel rect, and the row / column rejections that touched it. Exact for any row, painted or not.
query?: SyGridSpanInteractionQuery
Promise<SyGridSpanInteractionReport>the last painted frame's span grid (counts, conflicts, the widened render range) and, with a query, one access decision: where an edit / focus / copy at that coordinate is redirected to.
ColumnDef2
ColumnDefType / RequiredDescription
(params: SyGridRowSpanParams<TData>) => numberOptional(PF-ROWLAYOUT-WIRING-01 batch A, AG `rowSpan`) — how many rows this column's cell spans, starting at the row the callback is asked about. `1` (or a non-integer / non-positive answer) spans nothing; the span never crosses a group / footer / tree / detail / loading / pivot row and is capped at 100 rows. Client-side row model only; refused (and painted 1×1) under auto-height rows — `getRowSpan(colId)` says why.
(params: SyGridColSpanParams<TData>) => numberOptional(PF-ROWLAYOUT-WIRING-01 batch A, AG `colSpan`) — how many columns this cell spans, to the right, inside its pin container (a span declared across a pin seam is clamped and reported). Origin cells take the summed width of the columns they cover; covered coordinates paint no cell. `getCellSpan(rowIndex, colId)` reports the resolved rectangle.