SYIDAX GRID
Grid Docs
Grid는 데이터를 읽는 표이면서 사용자가 검색·선택·수정한 결과를 앱으로 돌려주는 입력 화면입니다. 이 매뉴얼은 기능을 켜는 방법뿐 아니라 데이터의 흐름과 기능을 함께 쓸 때의 판단 기준을 설명합니다.
동작 원리와 선택 기준
처음에는 설치와 데이터 모델을 읽고 필요한 기능별 장으로 이동하세요. API 사전에서는 속성 1개, 메서드 1개, 이벤트 1개를 독립적으로 찾을 수 있습니다. 예제의 grid는 등록이 끝난 sy-grid 요소입니다. Docs에는 실행 중인 Grid를 넣지 않으며 코드와 결과 설명을 따라 앱에 연결합니다.
코드의 grid는 설치와 연결 장에서 준비한 Grid 요소입니다. 예제마다 필요한 데이터·설정을 확인하고, 코드에서 소개하는 앱 함수와 서버 주소는 프로젝트에 맞게 구현하세요.
예제 1. 읽기 전용 주문 목록
제품명과 주문 수량을 보여 주되 사용자가 값을 바꾸지 않는 조회 화면입니다. 먼저 열과 행을 연결하고 정렬과 검색만 켭니다.
grid.defaultColDef = { sortable: true, editable: false };
grid.quickFilter = true;
grid.pagination = true;
grid.pageSize = 20;결과 확인: 행 수가 늘어도 한 페이지에서 읽을 양을 제한할 수 있습니다. 표시를 바꾸는 검색·정렬과 원본 값을 바꾸는 편집을 구분합니다.
예제 2. 수정하고 저장하는 업무 화면
수량을 편집할 수 있게 한 뒤 cellValueChanged에서 실제 바뀐 값을 읽어 저장 작업에 사용합니다. 서버 저장은 Grid 외부의 앱 책임입니다.
grid.addEventListener('cellValueChanged', ({ detail }) => {
console.log(detail.rowId, detail.field, detail.oldValue, detail.newValue);
});결과 확인: 이벤트에 행 ID와 변경 전후 값이 들어옵니다. 저장 성공·실패 표시는 앱에서 응답에 맞춰 처리합니다.
예제 3. 요약에서 원본까지 탐색
담당 팀별로 합산하려면 그룹화, 팀과 지역을 교차 비교하려면 피벗을 선택합니다. 같은 수량이라도 개별 주문 값과 요약 숫자의 의미가 달라집니다.
// Pro: 팀별 주문 묶기
grid.groupBy = 'team';
grid.pagination = false;결과 확인: 팀별 요약에서 각 주문을 펼쳐 확인합니다. 피벗으로 전환할 때는 일반 groupBy를 해제하고 피벗의 행·열·값 기준을 지정합니다.
조합할 때와 문제를 해결할 때
데이터 다운로드가 느린 문제는 가상화만으로 해결되지 않습니다. 가상화는 화면 요소의 수를 줄이고, 원격 행 모델은 가져오는 데이터의 범위를 줄입니다.
Features의 주문 예제는 기능 체험용입니다. 협업 서버·권한·파일 저장 같은 앱 통합은 해당 장의 준비 조건을 함께 구현해야 합니다.
함께 읽기
- 행·열·ID의 관계
- 결과와 이벤트 연결
- Features에서 살펴보기
직접 체험 가능한 범위는 해당 가이드에 안내되어 있습니다.