# 행 높이와 고정 행

행 높이, 상하 고정 행, 전체 너비 행, 병합 셀은 서로 다른 레이아웃 기능입니다. 요약값을 항상 보여 주는 목적과 상세 내용을 넓게 보여 주는 목적을 구분해서 선택합니다.

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

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

## 동작 원리와 선택 기준

고정 행은 별도의 데이터입니다. 자동 합계가 아니므로 필터나 편집에 맞춰 합계를 바꾸려면 앱이 계산한 값을 다시 전달해야 합니다.

코드의 grid는 설치와 연결 장에서 준비한 Grid 요소입니다. 예제마다 필요한 데이터·설정을 확인하고, 코드에서 소개하는 앱 함수와 서버 주소는 프로젝트에 맞게 구현하세요.

- [설치와 연결 · 공통 예제 데이터](https://grid.syidax.com/ko/docs/guides/getting-started.md)

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

## 예제 1. 아래쪽 요약 행 고정

현재 데이터 전체의 수량 합계를 계산해 별도 행으로 표시합니다.

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

결과 확인: 화면을 스크롤해도 요약 행이 남습니다. 이 계산은 필터 결과가 아닌 rowData 전체 기준입니다.

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

## 예제 2. 읽기 좋은 행 높이

사용자가 행 밀도를 바꾸는 설정을 앱에 제공할 수 있습니다.

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

결과 확인: 높이가 바뀐 행 배치가 반영됩니다. 자동 높이를 사용한다면 줄바꿈과 셀 내용도 함께 확인하세요.

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

## 예제 3. 병합·전체 너비·고정 조합 진단

같은 데이터에 여러 구조 기능을 겹칠 때는 실제 적용 결과를 조회해 확인합니다.

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

결과 확인: 전체 너비 행과 고정 영역이 어떤 데이터에 적용되었는지 확인할 수 있습니다. 세부 병합 판정은 getCellSpan·getSpanInteraction의 인수 계약을 따라 조회합니다.

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

## 조합할 때와 문제를 해결할 때

병합 영역은 정렬과 필터에 따라 경계가 달라집니다. 표시된 셀 범위와 복사·내보내기의 병합 처리 규칙을 함께 검토하세요.

전체 너비 행에 일반 열 편집이 그대로 적용된다고 가정하지 마세요. 레이아웃이 거절되면 rowLayoutRefused 등의 보고를 읽고 이유를 해결합니다.

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

## 이 기능에 사용하는 API

- [spanExportMode](https://grid.syidax.com/ko/docs/options/spanExportMode.md) — 병합 셀을 복사·출력할 때 원점 값을 한 번만 쓸지 각 위치에 반복할지 선택합니다.
- [alignedGrids](https://grid.syidax.com/ko/docs/options/alignedGrids.md) — 열 배치 등을 함께 맞출 Grid 연결을 지정합니다. 연결 결과와 순환 제한은 정렬된 Grid 보고서에서 확인합니다.
- [isFullWidthRow](https://grid.syidax.com/ko/docs/options/isFullWidthRow.md) — 특정 행을 열별 셀이 아닌 전체 폭 행으로 표시할지 판단합니다.
- [fullWidthCellRenderer](https://grid.syidax.com/ko/docs/options/fullWidthCellRenderer.md) — 전체 폭 행의 내용을 그리는 렌더러입니다. 일반 셀 렌더러와 다른 입력 계약을 사용합니다.
- [fullWidthRowHeight](https://grid.syidax.com/ko/docs/options/fullWidthRowHeight.md) — 전체 폭 행의 고정 높이 또는 행별 높이 계산 함수를 지정합니다.
- [pinnedTopRowData](https://grid.syidax.com/ko/docs/options/pinnedTopRowData.md) — 스크롤과 별개로 표 위쪽에 고정할 행 데이터입니다.
- [pinnedBottomRowData](https://grid.syidax.com/ko/docs/options/pinnedBottomRowData.md) — 스크롤과 별개로 표 아래쪽에 고정할 행 데이터입니다.
- [rowSpan](https://grid.syidax.com/ko/docs/columns/rowSpan.md) — 셀 문맥에서 세로로 차지할 행 수를 반환합니다. 충돌과 표시 모델의 제한은 span 보고서에서 확인합니다.
- [colSpan](https://grid.syidax.com/ko/docs/columns/colSpan.md) — 셀 문맥에서 가로로 차지할 열 수를 반환합니다. 고정 영역과 숨긴 열의 경계를 고려합니다.
- [setAlignedGrids](https://grid.syidax.com/ko/docs/methods/setAlignedGrids.md) — Grid 간 열 정렬 연결을 설정하고 결과를 반환합니다.
- [getAlignedGrids](https://grid.syidax.com/ko/docs/methods/getAlignedGrids.md) — 현재 연결된 Grid와 정렬 연결 상태를 읽습니다.
- [getFullWidthRowInfo](https://grid.syidax.com/ko/docs/methods/getFullWidthRowInfo.md) — 특정 전체 폭 행의 정보를 읽거나 인수를 생략해 전체 레이아웃 보고서를 읽습니다.
- [setPinnedRows](https://grid.syidax.com/ko/docs/methods/setPinnedRows.md) — 위·아래 고정 행 데이터를 설정하고 적용 결과를 반환합니다.
- [getPinnedRows](https://grid.syidax.com/ko/docs/methods/getPinnedRows.md) — 현재 고정 행 데이터를 보고서로 읽습니다.
- [getPinnedRowInfo](https://grid.syidax.com/ko/docs/methods/getPinnedRowInfo.md) — 지정한 고정 행의 세부 정보를 읽습니다.
- [getRowSpan](https://grid.syidax.com/ko/docs/methods/getRowSpan.md) — 세로 병합 범위의 계산 결과를 읽습니다.
- [getCellSpan](https://grid.syidax.com/ko/docs/methods/getCellSpan.md) — 특정 셀의 가로·세로 병합 정보를 읽습니다.
- [getSpanInteraction](https://grid.syidax.com/ko/docs/methods/getSpanInteraction.md) — 병합 셀과 선택·복사 등 상호작용의 처리 결과를 확인합니다.
- [spanConflict](https://grid.syidax.com/ko/docs/events/spanConflict.md) — 셀 병합이 다른 범위나 레이아웃과 충돌했을 때 발생합니다.
- [pinnedRowsChanged](https://grid.syidax.com/ko/docs/events/pinnedRowsChanged.md) — 위·아래 고정 행 데이터가 바뀌었을 때 발생합니다.
- [rowLayoutRefused](https://grid.syidax.com/ko/docs/events/rowLayoutRefused.md) — 요청한 행 레이아웃을 적용할 수 없을 때 발생합니다. 거절 이유에 맞춰 조합을 수정합니다.

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

## 함께 읽기

- [행·열·ID의 관계](https://grid.syidax.com/ko/docs/guides/concepts.md)
- [결과와 이벤트 연결](https://grid.syidax.com/ko/docs/guides/data-event-access.md)
- [Features에서 살펴보기](https://grid.syidax.com/grid/row-layout) — 직접 체험 가능한 범위는 해당 가이드에 안내되어 있습니다.