Grid overview.
하나의 Grid에 필요한 기능을 조합하고, 데이터와 사용자 작업을 애플리케이션에 연결하세요.
빠르게 이해하기
Grid 작업 화면 열기 → · 아래 순서는 작업 화면에서 따라 할 수 있습니다.
주문 목록처럼 많은 데이터를 찾고 수정하는 화면을 만들 때 사용합니다. 하나의 표에 검색, 정렬, 편집 같은 기능을 필요한 만큼 조합할 수 있습니다.
직접 해보기
- 필요한 주문 찾기
표 위 검색창에 Platform을 입력해 담당 팀이 Platform인 주문을 찾아보세요. 검색어를 지우면 전체 주문이 다시 보입니다.
- 값 바꾸기
수량 셀을 두 번 누르고 숫자를 입력한 뒤 Enter를 누르세요. 같은 행의 합계도 함께 바뀝니다.
- 기능 비교하기
표 아래 옵션에서 열 필터나 범위 선택을 켜고 달라진 화면을 확인하세요. 기능 메뉴를 선택하면 그 기능에 맞는 초기 설정으로 전환됩니다.
확인할 결과
표 아래 실행 결과에는 선택·편집 결과가 JSON으로 표시됩니다. 코드 보기에는 현재 옵션이 반영됩니다.
샘플 행 수가 같으면 메뉴 이동 중 편집한 데이터는 유지됩니다. 초기화는 현재 예제의 데이터와 설정을 처음으로 되돌립니다.
알아두면 쉬운 용어
- Grid
- 행과 열로 데이터를 보여 주고 조작하는 표입니다.
- JSON
- 이름과 값의 쌍으로 결과를 표현한 형식입니다.
하나의 작업 화면
#Grid는 하나의 표에 정렬·검색·선택·편집·분석을 조합합니다. Grid 아래에서 옵션을 바꾸고, 표 아래의 실행 결과와 현재 설정의 적용 코드를 함께 확인하세요.
데이터와 연결
#- 열 columnDefs에 field·headerName과 열별 동작을 정의합니다.
- 행 rowData에 객체 배열을 전달하고, getRowId로 안정적인 고유 ID를 제공합니다.
- 변경 CustomEvent.detail에서 편집·선택 결과를 읽고, 메서드 반환값은 await로 확인합니다.
패키지와 실행 환경
#- Community 기본 Grid 기능과 Syidax 로고를 제공합니다.
- Pro Community 기능에 Pro 기능을 더한 패키지입니다. 사용할 기능의 라이선스를 등록하세요.
- 기능 탐색 PRO 태그는 유료 기능을 뜻합니다. API의 PRO 옵션은 기본 사용은 Free지만 일부 설정에 권한이 필요하다는 뜻입니다.