테이블
데이터를 표 형태로 표시하고 관리할 수 있는 컴포넌트입니다. 정렬, 필터링, 페이지 나누기, 서버 테이블, CSV 다운로드 등 다양한 기능을 제공합니다.

프로퍼티
프로퍼티 | 타입 | 설명 |
---|---|---|
이름 (name) | string | 테이블 컴포넌트의 고유 이름 |
레이블 (label) | string | 테이블 헤더에 표기되는 텍스트 |
데이터 (code) | string (Record<string, unknown>[] ) | 테이블에 표기할 데이터 |
테이블 종류 (isDataTable) | boolean | true : 데이터 테이블(페이지 나누기, 정렬, 필터링, 서버 페이징 활성화)false : 기본 테이블 |
컬럼 목록 (columnDefinitions) | TableColumnDefinitionTemplate[] | 테이블 컬럼 정의 목록 |
행 선택 옵션(행 선택 활성화, isRowSelectionEnabled) | boolean | true : 단일 행 선택 또는 복수 행 선택 가능false : 비활성화 |
행 선택 옵션(복수 행 비활성화, isMultipleRowSelectionDisabled) | boolean | true : 단일 행 선택 false : 복수 행 선택 |
행 고유 키 선택 (rowKey) | string | 행 선택시 사용하는 행의 고유 키 |
편집 방법 (editingMode) | string | 테이블 셀을 편집할 때 사용할 방법 |
서버 페이징 (isServerSidePaginationEnabled) | boolean | 데이터 테이블일 때 서버 페이징 활성화 여부 |
페이지당 개수 (rowsPerPage) | string | 서버 페이징이 활성화 되었을 때 서버에서 불러올 페이지당 행 개수 |
전체 데이터 개수 (rowsCount) | string | 서버 페이징이 활성화 되었을 때 서버에서 불러올 전체 데이터 개수 |
서버 필터링 (isServerSideFilteringEnabled) | boolean | 데이터 테이블일 때 서버 필터링 활성화 여부 |
서버 정렬 (isServerSideSortingEnabled) | boolean | 데이터 테이블일 때 서버 정렬 활성화 여부 |
CSV 다운로드 (isCsvDownloadable) | boolean | 테이블 데이터 CSV 다운로드 가능 여부 |
고정 높이 설정 (isHeightFixed) | boolean | 테이블의 고정 높이 설정 여부 |
높이 (contentHeight) | string | 테이블의 고정 높이 |
숨김 (isHidden) | string (boolean) | 배포된 페이지에서 테이블 숨김 여부 |
이름 (name)
테이블 컴포넌트를 식별하는 고유한 이름입니다. 이름 규칙을 참고하세요.

레이블 (label)
테이블 상단에 표시되는 제목입니다.

데이터 (code)
테이블에 표시할 데이터를 설정합니다. 다음 두 가지 방식으로 데이터를 입력할 수 있습니다:
-
직접 데이터 입력
- 배열 형태로 데이터를 직접 입력합니다.
- 예시:
[
{ 이름: '크러쉬', 곡: 'With You', 앨범: 'From Midnight To Sunrise', 발매일자: 2019, 장르: 'R&B' },
{ 이름: '선우정아', 곡: '도망가자', 앨범: 'Serenade', 발매일자: 2019, 장르: 'R&B' },
{ 이름: '김동률', 곡: '다시 사랑한다 말할까', 앨범: '귀향', 발매일자: 2001, 장르: '발라드' },
{ 이름: '백예린', 곡: 'Square', 앨범: 'Every letter I sent you', 발매일자: 2019, 장르: 'R&B' },
{ 이름: '아이유', 곡: '라일락', 앨범: 'LILAC', 발매일자: 2021, 장르: '발라드' },
]; -
워크플로우 데이터 사용
- 워크플로우가 반환하는 배열 데이터를 사용할 수 있습니다.
- 예시:
playlist1
워크플로우의 반환 데이터를playlist1.data
로 사용
[
{ 이름: '크러쉬', 곡: 'With You', 앨범: 'From Midnight To Sunrise', 발매일자: 2019, 장르: 'R&B' },
{ 이름: '선우정아', 곡: '도망가자', 앨범: 'Serenade', 발매일자: 2019, 장르: 'R&B' },
{ 이름: '김동률', 곡: '다시 사랑한다 말할까', 앨범: '귀향', 발매일자: 2001, 장르: '발라드' },
{ 이름: '백예린', 곡: 'Square', 앨범: 'Every letter I sent you', 발매일자: 2019, 장르: 'R&B' },
{ 이름: '아이유', 곡: '라일락', 앨범: 'LILAC', 발매일자: 2021, 장르: '발라드' },
];
테이블 종류 (isDataTable)
테이블의 기능을 선택합니다. 데이터 테이블로 설정하면 페이지 나누기, 정렬, 필터링, 서버 테이블 기능을 사용할 수 있습니다.

페이지 나누기 (페이지네이션)
데이터 테이블에서 기본으로 제공되는 기능입니다. 클라이언트 측에서 페이지를 나누어 표시합니다.
페이지 하단에서 페이지당 행 수와 현재 페이지를 확인할 수 있으며, 페이지 이동 버튼으로 원하는 페이지로 이동할 수 있습니다.

페이지당 행 수는 기본값 100에서 10, 20, 50, 100 중 선택할 수 있습니다.

필터링
컬럼별로 필터링을 적용하여 원하는 데이터만 표시할 수 있습니다. 컬럼 헤더의 메뉴 아이콘을 클릭하여 필터를 설정할 수 있습니다.

- 필터를 적용할 컬럼을 선택합니다. 컴포넌트 타입에 따라 사용 가능한 필터 연산자가 다릅니다.
- 필터 연산자를 선택합니다. 사용 가능한 연산자는 다음과 같습니다:
연산자 | 설명 |
---|---|
포함하는 | 입력값이 포함된 데이터 필터링 |
값이 같은 | 입력값과 정확 히 일치하는 데이터 필터링 |
값이 비어있는 | 빈 문자열이나 빈 배열 필터링 |
값이 들어있는 | 비어있지 않은 문자열이나 배열 필터링 |
값이 참인 | true 값 필터링 |
값이 거짓인 | false 값 필터링 |
보다 큰 | 입력값보다 큰 데이터 필터링 |
보다 크거나 같은 | 입력값보다 크거나 같은 데이터 필터링 |
보다 작은 | 입력값보다 작은 데이터 필터링 |
보다 작거나 같은 | 입력값보다 작거나 같은 데이터 필터링 |
값이 있는 | null 이 아닌 데이터 필터링 |
값이 없는 | null 값 필터링 |
- 필터 값을 입력하면 필터링이 적용됩니다.
정렬
컬럼별로 데이터를 정렬할 수 있습니다. 기본적으로는 정렬이 적용되지 않은 상태입니다.
컬럼 헤더에 마우스를 올리면 나타나는 정렬 아이콘을 클릭하여 오름차순/내림차순/정렬 해제를 전환할 수 있습니다. 한 번에 하나의 컬럼에만 정렬을 적용할 수 있으며, 각 컴포넌트의 값을 기준으로 정렬됩니다.

컬럼 목록 (columnDefinitions)
테이블의 컬럼을 관리합니다. 컬럼의 추가/삭제/숨김/순서 변경/재설정이 가능합니다. 컬럼 목록을 클릭하면 컬럼 설정 창이 열립니다.

컬럼 추가
우측 상단의 +
버튼으로 새 컬럼을 추가합니다. 추가된 컬럼은 테이블의 맨 오른쪽에 위치합니다.

컬럼 삭제
컬럼 우측의 삭제 아이콘으로 컬럼을 삭제합니다. 삭제된 컬럼은 복구할 수 없습니다.

컬럼 숨김
컬럼 우측의 숨김 아이콘으로 컬럼을 숨깁니다. 숨겨진 컬럼의 데이터는 유지됩니다.

컬럼 순서 변경
컬럼을 드래그하여 순서를 변경할 수 있습니다.

컬럼 재설정
우측 상단의 재설정 버튼으로 컬럼을 재설정합니다. 현재 테이블 데이터를 기반으로 컬럼이 재구성되며, 이전 설정은 복구할 수 없습니다.

확인 팝업에서 재설정을 진행할 수 있습니다.

추가 기능
테이블 데이터 저장과 서버 사이드 기능(페이징/필터링/정렬)을 설정할 수 있습니다.

저장 (eventListeners)
테이블의 데이터 수정 및 저장 기능을 제공합니다.
데이터가 수정되면 변경사항이 updatedRows
상태에 기록됩니다. 저장 버튼 클릭 시:
- 설정된 이벤트 리스너가 실행되어
updatedRows
데이터를 처리합니다 - 저장이 완료되면
updatedRows
가 초기화됩니다
우측 상단의 +
버튼 으로 이벤트 리스너를 추가하고 저장 시 실행할 워크플로우를 지정할 수 있습니다.

필요한 경우 여러 개의 이벤트 리스너를 추가할 수 있습니다.

설정 후 데이터를 수정하고 저장하면 지정된 워크플로우가 실행됩니다.

서버 사이드
데이터 테이블에서 서버 사이드 기능(페이징/필터링/정렬)을 사용할 수 있습니다.
각 기능은 독립적으로 또는 조합하여 사용할 수 있으며, 활성화된 기능에 따라 서버로 관련 파라미터가 전달됩니다.

서버 사이드 페이징 (isServerSidePaginationEnabled)
서버에서 페이지 단위로 데이터를 로드합니다.
활성화하면 page
상태가 추가되고 클라이언트 페이징은 비활성화됩니다.
자세한 내용은 상태 문서를 참고하세요.

페이지당 개수 (rowsPerPage)
서버에서 가져올 페이지당 행 수를 설정합니다. 워크플로우 결과를 사용하거나 직접 값을 입력할 수 있습니다.

전체 데이터 개수 (rowsCount)
서버의 전체 데이터 개수를 설정합니다. 워크플로우 결과를 사용하거나 직접 값을 입력할 수 있습니다.

서버 사이드 필터링 (isServerSideFilteringEnabled)
서버에서 데이터 필터링을 수행합니다.
활성화하면 filters
상태가 추가되고 클라이언트 필터링은 비활성화됩니다.
자세한 내용은 상태 문서를 참고하세요.

서버 사이드 정렬 (isServerSideSortingEnabled)
서버에서 데이터 정렬을 수행합니다.
활성화하면 sort
상태가 추가되고 클라이언트 정렬은 비활성화됩니다.
자세한 내용은 상태 문서를 참고하세요.

행 선택 옵션 (isRowSelectionEnabled, isMultipleRowSelectionDisabled)
행 선택 기능을 설정합니다.
단일 선택은 행을 클릭하여 선택하고, 복수 선택은 좌측 체크박스로 여러 행을 선택할 수 있습니다.
선택된 행은 selectedRows
등의 상태로 관리됩니다.

행 고유 키 선택 (rowKey)
행을 식별하는 고유 키를 설정합니다.
중복 선택 방지를 위해 고유한 값을 가진 필드를 선택합니다.
설정하지 않으면 selectedRows
는 현재 페이지 내에서만 동작합니다.
