TDGrid
TDGrid(TD그리드) 위젯은 여러 행과 열로 데이터를 표(그리드) 형태로 표시하는 위젯입니다.
헤더·푸터, 컬럼별 셀, 정렬, 행·열 제어, 스크롤 이벤트를 지원해 목록·표 화면을 구성할 때 사용합니다.
정보
이 위젯은 Free 플랜에서 잠겨 있으며, Pro·Enterprise 플랜에서 사용할 수 있습니다.
정의 / 역할
TDGrid 위젯은 데이터를 행과 열로 배치한 스프레드시트 형태의 그리드를 그려줍니다. 각 컬럼은 셀 위젯으로 구성되며, 데이터에 바인딩해 여러 행을 반복 렌더링합니다. 헤더·푸터 행, 컬럼 표시·너비 조정, 정렬, 행 개별 스타일(색·높이·보더·표시), 고정 행(frozen), 스크롤 이벤트를 제공합니다.
- 카테고리: Layouts (레이아웃)
- 기본 구성: 헤더 사용(
useHeader= 켬), 푸터 미사용(useFooter= 끔), 데이터 행 0개
기능
| 기능 | 설명 |
|---|---|
| 행·열 데이터 표시 | 데이터를 바인딩해 여러 행을 반복 렌더링하고, 각 컬럼을 셀 위젯으로 구성합니다. |
| 헤더 / 푸터 | 표 상단 헤더 행과 하단 푸터 행을 켜고 끕니다. 각각 높이·배경·구분선을 설정할 수 있습니다. |
| 정렬 | 지정한 컬럼(속성) 값 기준으로 오름차순·내림차순·원래 순서로 행을 정렬합니다. |
| 컬럼 제어 | 컬럼별 표시·숨김과 너비를 (선택적으로 애니메이션과 함께) 조정하고, 컬럼 순서를 재배치합니다. |
| 행 개별 스타일 | 행 단위로 표시·숨김, 배경색, 보더, 높이를 지정합니다. |
| 고정 행 | 상단에서부터 지정한 개수의 행을 스크롤과 무관하게 고정합니다. |
| 스크롤 이벤트 | 스크롤 시작·갱신·정지·끝 도달 시 동작을 실행합니다. 가로 스크롤이 가능하면 헤더에 좌우 이동 버튼을 표시할 수 있습니다. |
사용 방법
- 왼쪽 위젯 팔레트에서 Layouts 카테고리를 엽니다.
- TDGrid 항목을 캔버스로 끌어다 놓습니다.
- 오른쪽 속성 패널에서 컬럼(
columns)을 구성하고 각 셀의 표시 내용을 데이터에 바인딩합니다. - 필요하면
useHeader·useFooter로 헤더·푸터를 켜고,frozenRowCount·rowHeight등으로 표 모양을 조정합니다. - 스크롤 동작이 필요하면 스크롤 이벤트에 실행할 로직·스크립트를 연결합니다.
속성 (Property)
노트
행 높이·색·구분선 두께 등 세부 값은 아래 속성 및 공통 Style(스타일) 설정에서 지정합니다. 아래는 속성 패널에 노출되는 TDGrid 속성입니다.
| 속성 | 설명 | 기본값 | 값 / 타입 |
|---|---|---|---|
useHeader | 헤더 행 사용 여부 | true (켬) | 참 / 거짓 |
useHeaderLine | 헤더 구분선 표시 여부 | true | 참 / 거짓 |
useHeaderScrollButton | 가로 스크롤 가능 시 헤더에 좌우 이동 버튼 표시 | true | 참 / 거짓 |
headerHeight | 헤더 행 높이 | 기본 행 높이 | 숫자(px) |
headerBgColor | 헤더 배경색 | 미지정 | 색상 |
headerLineColor | 헤더 구분선 색 | 미지정 | 색상 |
headerLineThickness | 헤더 구분선 두께 | 1.0 | 숫자(0.1~10.0) |
padding | 그리드 안쪽 여백 | 미지정 | 여백 값 |
primary | 기본 스크롤 뷰로 동작할지 여부 | 미지정 | 참 / 거짓 |
columns | 그리드의 컬럼 정의 목록 | 미지정(빈 목록) | 컬럼 목록 |
rowHeight | 데이터 행 높이 | 기본 행 높이 | 숫자(0 이상, px) |
frozenRowCount | 상단에서 고정할 행 개수 | 0 | 숫자(0~20) |
useRowLine | 데이터 행 구분선 표시 여부 | false (끔) | 참 / 거짓 |
itemCount | 데이터 행 개수 | 0 | 숫자(0 이상) |
rowLineColor | 행 구분선 색 | 미지정 | 색상 |
rowLineThickness | 행 구분선 두께 | 1.0 | 숫자(0.1~10.0) |
useFooter | 푸터 행 사용 여부 | false (끔) | 참 / 거짓 |
useFooterLine | 푸터 구분선 표시 여부 | true | 참 / 거짓 |
footerHeight | 푸터 행 높이 | 기본 행 높이 | 숫자(px) |
footerBgColor | 푸터 배경색 | 미지정 | 색상 |
footerLineColor | 푸터 구분선 색 | 미지정 | 색상 |
footerLineThickness | 푸터 구분선 두께 | 1.0 | 숫자(0.1~10.0) |
주의 / 팁
팁
useHeader를 켜면 맨 위 행이 헤더로, useFooter를 켜면 맨 아래 행이 푸터로 추가됩니다. 나머지 행이 데이터 영역이며 바인딩한 데이터 수만큼 반복 렌더링됩니다.
노트
frozenRowCount는 0~20 범위에서만 지정할 수 있습니다. 실제 고정되는 행 수는 데이터 행 수를 넘지 않습니다.
더 알아보기
팁
이 위젯을 스크립트로 제어하는 Widget Control(Property·Method·Event) 전체는 TDGrid (TD그리드) Widget Control 문서에서 확인하세요.