syidaxgrid
홈 가격 내 정보
SYIDAX / DATA GRID

행 높이와 고정 행

행 높이, 고정 행, 셀 병합으로 데이터의 구조를 표현합니다.

시작하기
행 높이와 고정 행샘플 주문 데이터
120 rows
Grid를 불러오는 중입니다…

옵션

아래 항목을 바꾸면 Grid와 코드에 바로 반영됩니다.

최근 결과

표 아래의 고정 요약 행을 확인하세요. 일반 주문 목록과 구분되어 표시됩니다.

코드 보기
현재 미리보기

사용 가이드

#

목록을 아래로 내려도 요약 행을 계속 보고 싶거나, 행 간격을 넓혀 내용을 읽기 쉽게 만들 때 사용합니다.

직접 해보기

  1. 고정 요약 행 찾기

    표 아래의 고정 요약 행을 확인하세요. 일반 주문 목록과 구분되어 표시됩니다.

  2. 스크롤하며 확인

    표 안을 아래로 스크롤해 보세요. 요약 행은 목록과 별도로 남습니다.

  3. 행 간격 비교

    표 아래 데이터와 표시에서 행 간격을 28px 또는 44px로 바꿔 보세요. 같은 높이에 보이는 주문 수가 달라집니다.

확인할 결과

요약 행은 고정된 위치에 있고, 선택한 행 간격이 주문 목록에 반영됩니다.

이 예제의 요약 행은 고정 샘플 값입니다. 현재 주문의 자동 합계가 아닙니다. 셀 병합과 전체 너비 행은 별도의 열·행 설정이 필요합니다.

알아두면 쉬운 용어

pinnedBottomRowData
표 아래에 고정해서 표시할 행 데이터입니다.
rowHeight
각 행의 높이이며 숫자의 단위는 px입니다.

핵심 API 예시

등록된 Grid 요소를 grid로 참조하는 앱 코드입니다.

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

API reference

#

나머지 속성7
Attribute / Property타입 / 기본값설명
spanExportMode		'origin-once' | 'repeat'기본값 '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 | string기본값 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 }) => boolean기본값 undefinedmarks a data row full-width (AG `isFullWidthRow`); grid-owned kinds win (`kind-conflict`).
fullWidthCellRenderer		SyGridFullWidthRenderer<GridRow>기본값 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)기본값 undefinedthe full-width row height (px, or a per-row function); the uniform row height otherwise.
pinnedTopRowData		GridRow[]기본값 undefinedrows pinned above the viewport (AG `pinnedTopRowData`; ids via `getRowId`, else `__pinned-top-<i>`).
pinnedBottomRowData		GridRow[]기본값 undefinedrows pinned below the viewport (AG `pinnedBottomRowData`).
이벤트3
이벤트detail 타입설명
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.
메서드9
메서드 / 인수반환 타입설명
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
ColumnDef타입 / 필수 여부설명
(params: SyGridRowSpanParams<TData>) => number선택(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>) => number선택(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.
GridTab 이동 Enter 열기