# Grid Docs

Grid는 데이터를 읽는 표이면서 사용자가 검색·선택·수정한 결과를 앱으로 돌려주는 입력 화면입니다. 이 매뉴얼은 기능을 켜는 방법뿐 아니라 데이터의 흐름과 기능을 함께 쓸 때의 판단 기준을 설명합니다.

Canonical: https://grid.syidax.com/ko/docs/

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

## 동작 원리와 선택 기준

처음에는 설치와 데이터 모델을 읽고 필요한 기능별 장으로 이동하세요. API 사전에서는 속성 1개, 메서드 1개, 이벤트 1개를 독립적으로 찾을 수 있습니다. 예제의 grid는 등록이 끝난 sy-grid 요소입니다. Docs에는 실행 중인 Grid를 넣지 않으며 코드와 결과 설명을 따라 앱에 연결합니다.

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

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

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

## 예제 1. 읽기 전용 주문 목록

제품명과 주문 수량을 보여 주되 사용자가 값을 바꾸지 않는 조회 화면입니다. 먼저 열과 행을 연결하고 정렬과 검색만 켭니다.

```javascript
grid.defaultColDef = { sortable: true, editable: false };
grid.quickFilter = true;
grid.pagination = true;
grid.pageSize = 20;
```

결과 확인: 행 수가 늘어도 한 페이지에서 읽을 양을 제한할 수 있습니다. 표시를 바꾸는 검색·정렬과 원본 값을 바꾸는 편집을 구분합니다.

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

## 예제 2. 수정하고 저장하는 업무 화면

수량을 편집할 수 있게 한 뒤 cellValueChanged에서 실제 바뀐 값을 읽어 저장 작업에 사용합니다. 서버 저장은 Grid 외부의 앱 책임입니다.

```javascript
grid.addEventListener('cellValueChanged', ({ detail }) => {
  console.log(detail.rowId, detail.field, detail.oldValue, detail.newValue);
});
```

결과 확인: 이벤트에 행 ID와 변경 전후 값이 들어옵니다. 저장 성공·실패 표시는 앱에서 응답에 맞춰 처리합니다.

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

## 예제 3. 요약에서 원본까지 탐색

담당 팀별로 합산하려면 그룹화, 팀과 지역을 교차 비교하려면 피벗을 선택합니다. 같은 수량이라도 개별 주문 값과 요약 숫자의 의미가 달라집니다.

```javascript
// Pro: 팀별 주문 묶기
grid.groupBy = 'team';
grid.pagination = false;
```

결과 확인: 팀별 요약에서 각 주문을 펼쳐 확인합니다. 피벗으로 전환할 때는 일반 groupBy를 해제하고 피벗의 행·열·값 기준을 지정합니다.

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

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

데이터 다운로드가 느린 문제는 가상화만으로 해결되지 않습니다. 가상화는 화면 요소의 수를 줄이고, 원격 행 모델은 가져오는 데이터의 범위를 줄입니다.

Features의 주문 예제는 기능 체험용입니다. 협업 서버·권한·파일 저장 같은 앱 통합은 해당 장의 준비 조건을 함께 구현해야 합니다.

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

## 이 기능에 사용하는 API

공통 설정과 아래 관련 문서를 함께 참고하세요.

- [Grid 속성](https://grid.syidax.com/ko/docs/options.md)
- [열 설정](https://grid.syidax.com/ko/docs/columns.md)
- [메서드](https://grid.syidax.com/ko/docs/methods.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/workspace) — 직접 체험 가능한 범위는 해당 가이드에 안내되어 있습니다.