테이블

데이터를 표 형태로 표시하고 관리할 수 있는 컴포넌트입니다. 정렬, 필터링, 페이지 나누기, 서버 테이블, 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는 현재 페이지 내에서만 동작합니다.

CSV 다운로드 (isCsvDownloadable)

테이블 데이터의 CSV 다운로드 기능을 설정합니다. 활성화하면 테이블 헤더 우측에 다운로드 버튼이 표시됩니다.

고정 높이 설정 (isHeightFixed)

고정 높이 설정 여부를 선택할 수 있습니다.
고정 높이를 자동으로 설정하면 컴포넌트 내부 크기에 맞추어 높이가 늘어납니다.

높이 (contentHeight)

컴포넌트의 고정 높이 값을 입력할 수 있습니다.
워크플로우의 실행 결과를 사용하거나 직접 값을 입력하여 높이를 설정할 수 있습니다.

숨김 (isHidden)

컴포넌트의 숨김 상태를 입력할 수 있습니다.
워크플로우의 실행 결과를 사용하거나 직접 값을 입력하여 컴포넌트 숨김 상태를 설정할 수 있습니다.
값을 true로 설정할 경우, 배포된 상태에서는 컴포넌트가 숨겨지고 편집 상태에서는 불투명한 상태로 편집이 가능합니다.

컬럼 설정

컬럼 목록의 각 컬럼을 클릭하여 세부 설정을 할 수 있습니다.

컬럼 소스

컬럼에 표시할 데이터의 소스를 선택합니다. 이 값은 각 셀의 기본 데이터가 되며, 컬럼 타입에 따라 다르게 표시됩니다.

셀의 값은 컬럼 설정의 코드나 템플릿에서 item으로 접근할 수 있으며, row로 현재 행의 전체 데이터에 접근할 수 있습니다.

테이블 외부에서는 컬럼 아이디를 키로 사용하여 셀 데이터에 접근합니다.

컬럼 아이디

컬럼의 고유 식별자입니다. 빈 값인 경우 컬럼 소스가 아이디로 지정됩니다.

다음 사항을 주의하세요:

테이블 내에서 유일해야 함
외부에서 데이터 접근 시 키로 사용됨
중복 시 데이터가 누락될 수 있음

컬럼 이름

테이블 헤더에 표시되는 컬럼명입니다.

컬럼 타입

컬럼에 표시할 컴포넌트 종류를 선택합니다. 타입별로 추가 설정이 가능합니다.

지원하는 컴포넌트 종류

버튼: 클릭 가능한 버튼
체크박스: 체크박스
날짜: 날짜 형식 데이터
이미지: 이미지
링크: 클릭 가능한 링크
멀티 셀렉트: 다중 선택 드롭다운
셀렉트: 단일 선택 드롭다운
숫자: 숫자 형식 데이터
텍스트: 일반 텍스트
모달 폼 만들기: 테이블 데이터 기반 모달 폼 생성

각 타입별 상세 설정은 컴포넌트 타입별 설정을 참고하세요.

컴포넌트 정렬

컬럼 내 컴포넌트의 정렬 방식을 설정합니다:

왼쪽 정렬
가운데 정렬
오른쪽 정렬

컬럼 너비 설정

컬럼의 너비를 설정합니다:

자동: 컨텐츠에 맞춰 자동 조절
수동: 지정한 픽셀 값으로 고정

컬럼 고정

컬럼을 테이블 왼쪽에 고정할 수 있습니다:

여러 컬럼 동시 고정 가능
고정된 컬럼은 항상 왼쪽에 위치

컬럼 숨김

컬럼을 숨김 처리합니다.

타입: 버튼

레이블

버튼에 표시할 텍스트를 설정합니다. 직접 입력하거나 워크플로우 결과를 사용할 수 있습니다.

실행 대상

버튼 클릭 시 실행할 동작을 설정합니다:

페이지 이동

이동할 페이지 선택
페이지 변수에 값 전달 가능
테이블 데이터를 변수로 전달 가능

워크플로우 실행

실행할 워크플로우 선택
워크플로우 변수에 값 전달 가능
테이블 데이터를 변수로 전달 가능

모달 제어

대상 모달 선택
열기/닫기 선택
테이블 데이터를 모달에 전달 가능

확인 모달

버튼 클릭 시 확인 모달 표시 여부를 설정합니다. 모달의 제목과 내용을 직접 입력하거나 워크플로우 결과를 사용할 수 있습니다.

비활성화

버튼의 활성화 상태를 설정합니다. 워크플로우 결과나 조건식으로 동적 제어가 가능합니다.

색상

버튼의 색상을 설정합니다. neutral, primary 중 선택 가능합니다.

스타일

버튼의 스타일을 설정합니다. outlined, filled, soft, plain 중 선택 가능합니다.

타입: 체크박스

편집 상태

체크박스의 편집 가능 여부를 설정합니다. 편집 가능 시 테이블의 편집 모드에 따라:

읽기 전용: 테이블 셀 데이터 수정 불가
편집 가능: 테이블 셀 데이터 수정 가능

기본값

체크박스의 초기 상태를 설정합니다.

타입: 날짜

편집 상태

날짜 필드의 편집 가능 여부를 설정합니다. 편집 가능 시 테이블의 편집 모드에 따라:

읽기 전용: 테이블 셀 데이터 수정 불가
편집 가능: 테이블 셀 데이터 수정 가능

날짜

날짜의 초기값을 설정합니다. 워크플로우 결과 사용, 직접 입력, 달력에서 선택이 가능합니다.

자세한 시각

시/분/초/시간대 입력 여부를 설정합니다.

타입: 이미지

링크

이미지의 URL을 설정합니다.

Alt 텍스트

이미지를 표시할 수 없을 때의 대체 텍스트를 설정합니다.

내용 숨김

이미지의 표시 여부를 설정합니다.

높이 설정

이미지 높이의 고정 여부를 설정합니다.

높이 (px)

높이가 고정일 때의 픽셀 값을 설정합니다.

이미지 조정

높이가 고정일 때의 이미지 표시 방식을 설정합니다:

fill: 이미지가 컴포넌트의 가로, 세로 크기에 맞춰 콘텐츠 박스를 가득 채웁니다. 이미지의 가로세로비가 변경될 수 있습니다.
contain: 이미지의 가로세로비를 유지하면서 콘텐츠 박스 내에서 최대한 크게 표시됩니다. 빈 공간이 생길 수 있습니다.
cover: 이미지의 가로세로비를 유지하면서 콘텐츠 박스를 가득 채웁니다. 이미지의 일부가 잘릴 수 있습니다.

패딩

이미지의 패딩을 설정할 수 있습니다.

타입: 링크

레이블

링크의 레이블을 입력할 수 있습니다.

링크

링크를 클릭하면 이동할 url, 또는 다운로드할 파일의 링크를 입력할 수 있습니다.

파일 이름

파일 다운로드 링크인 경우 다운로드 입력을 입력하면 해당 이름으로 파일이 다운로드 됩니다.

내용 숨김

값을 true로 설정하면 링크를 테이블에서 숨깁니다.

타입: 멀티 셀렉트

편집 상태

멀티 셀렉트의 편집 상태를 설정할 수 있습니다. 편집 가능인 경우 테이블의 편집 모드에 따라 편집 상태가 결정됩니다:

읽기 전용: 테이블 셀 데이터 수정 불가
편집 가능: 테이블 셀 데이터 수정 가능

옵션

멀티 셀렉트의 코드를 입력할 수 있습니다.

- 예시:
[
  { label: '헤비메탈', value: '헤비메탈', isHidden: true },
  { label: 'R&B', value: 'R&B' },
  { label: '댄스', value: '댄스' },
  { label: '재즈', value: '재즈' },
  { label: '발라드', value: '발라드' },
];

기본값

멀티 셀렉트의 기본값을 입력할 수 있습니다.

플레이스홀더

멀티 셀렉트의 플레이스 홀더를 입력할 수 있습니다.

줄 바꿈

멀티 셀렉트의 줄 바꿈 여부를 설정할 수 있습니다.

타입: 셀렉트

편집 상태

셀렉트의 편집 상태를 설정할 수 있습니다. 편집 가능인 경우 테이블의 편집 모드에 따라 편집 상태가 결정됩니다:

읽기 전용: 테이블 셀 데이터 수정 불가
편집 가능: 테이블 셀 데이터 수정 가능

옵션

셀렉트의 코드를 입력할 수 있습니다.

- 예시:
[
  { label: '헤비메탈', value: '헤비메탈', isHidden: true },
  { label: 'R&B', value: 'R&B' },
  { label: '댄스', value: '댄스' },
  { label: '재즈', value: '재즈' },
  { label: '발라드', value: '발라드' },
];

기본값

셀렉트의 기본값을 입력할 수 있습니다.

플레이스홀더

셀렉트의 플레이스 홀더를 입력할 수 있습니다.

타입: 숫자

편집 상태

숫자의 편집 상태를 설정할 수 있습니다. 편집 가능인 경우 테이블의 편집 모드에 따라 편집 상태가 결정됩니다:

읽기 전용: 테이블 셀 데이터 수정 불가
편집 가능: 테이블 셀 데이터 수정 가능

기본값

숫자 필드의 기본값을 입력할 수 있습니다.

형식

숫자를 표시하는 방법입니다. 일반, 퍼센트, 통화 형식을 선택할 수 있습니다.

소수점 자릿수

최대 소수점 자리를 지정합니다. 0부터 20사이의 소수점 자리수를 입력할 수 있습니다.

자릿수 채우기

활성화하면 입력한 값의 소수점 자릿수가 설정된 소수점 자릿수보다 적을 경우 나머지 자릿수를 0으로 채웁니다.

콤마 표시

표시를 선택하면 1,000의 자리마다 콤마를 표시합니다.

유효성 검사

숫자 필드 값의 유효성을 검사합니다. 에러 메세지를 표시할 수 있습니다.
별도의 에러 메세지를 설정하지 않으면 기본 에러메세지를 표시합니다.

플레이스홀더

숫자의 플레이스 홀더를 입력할 수 있습니다.

정렬

내부 숫자를 선택한 방향에 맞게 정렬합니다.

타입: 텍스트

편집 상태

텍스트의 편집 상태를 설정할 수 있습니다. 편집 가능인 경우 테이블의 편집 모드에 따라 편집 상태가 결정됩니다:

읽기 전용: 테이블 셀 데이터 수정 불가
편집 가능: 테이블 셀 데이터 수정 가능

기본값

컬럼에 표기될 텍스트의 레이블 및 텍스트 필드의 기본값을 입력할 수 있습니다.

스타일

텍스트의 스타일을 선택할 수 있습니다.

색상

텍스트의 색상을 선택할 수 있습니다.
왼쪽 물방울 버튼을 눌러 색상 선택 UI를 열 수 있습니다. 왼쪽 텍스트 필드에는 HEX 색상 코드를 입력할 수 있습니다.
오른쪽 텍스트 필드에는 불투명도를 입력할 수 있습니다.

유효성 검사

텍스트 필드 값의 유효성을 검사합니다. 에러 메세지를 표시할 수 있습니다.
별도의 에러메세지를 설정하지 않으면 기본 에러메세지를 표시합니다.

플레이스홀더

텍스트 필드의 플레이스 홀더를 입력할 수 있습니다.

정렬

내부 텍스트를 선택한 방향에 맞게 정렬합니다.

상태

테이블은 다음과 같은 상태를 관리합니다:

데이터 관련 상태

프로퍼티	타입	설명
originalData	`TableData \| undefined`	원본 테이블 데이터
data	`TableData \| undefined`	현재 표시되는 테이블 데이터
createdRows	`Record<string, unknown>[][]`	새로 생성된 행 데이터
updatedRows	`Record<string, unknown>[][]`	수정된 행 데이터
deletedRows	`Record<string, unknown>[][]`	삭제된 행 데이터
updatedRowKeys	`string[]`	수정된 행의 키 목록

선택 관련 상태

프로퍼티	타입	설명
selectedRow	`Record<string, unknown>[] \| undefined`	현재 선택된 행 데이터
selectedRowIndex	`number \| undefined`	현재 선택된 행의 인덱스
selectedRowKey	`string \| undefined`	현재 선택된 행의 키
selectedRows	`Record<string, unknown>[][]`	선택된 모든 행 데이터 목록
selectedRowIndicies	`number[]`	선택된 모든 행의 인덱스 목록
selectedRowKeys	`string[]`	선택된 모든 행의 키 목록
selectedOriginalRow	`Record<string, unknown>[] \| undefined`	원본 데이터에서 선택된 행
selectedOriginalRows	`Record<string, unknown>[] \| undefined`	원본 데이터에서 선택된 행 목록

페이지네이션 상태

프로퍼티	타입	설명
page	`TablePageState`	현재 페이지 상태
rowsCount	`number \| undefined`	전체 행 개수
rowsPerPage	`number \| undefined`	페이지당 행 개수

필터 및 정렬 상태

프로퍼티	타입	설명
filters	`TableFilterState[]`	현재 적용된 필터 상태 목록
sort	`TableSortState \| undefined`	현재 적용된 정렬 상태

기타 상태

프로퍼티	타입	설명
isCsvDownloadable	`boolean`	CSV 다운로드 가능 여부
isDataTable	`boolean`	데이터 테이블 여부
isError	`boolean`	에러 발생 여부
isLoading	`boolean`	로딩 상태 여부
editingMode	`TableEditingMode`	현재 테이블 편집 모드
columnDefinitions	`TableColumnDefinition[]`	테이블 컬럼 정의 목록
rowKeys	`unknown \| undefined`	행 키 목록
isMultipleRowSelectionDisabled	`boolean`	다중 행 선택 비활성화 여부
isRowSelectionEnabled	`boolean`	행 선택 활성화 여부
isServerSideFilteringEnabled	`boolean`	서버 사이드 필터링 활성화 여부
isServerSidePaginationEnabled	`boolean`	서버 사이드 페이지네이션 활성화 여부
isServerSideSortingEnabled	`boolean`	서버 사이드 정렬 활성화 여부
eventListeners	`EventListener[]`	이벤트 리스너 목록

타입 정의

interface TablePageState {
  // 페이지당 행 개수
  rowsPerPage: number | undefined;
  // 현제 페이지 인덱스
  index: number | undefined;
  // 페이지 데이터 조회 시작 위치
  offset: number | undefined;
  // 한 번에 검색되는 데이터의 최대 수
  limit: number | undefined;
  // 전체 데이터 개수
  rowsCount?: number;
}

export type TableFilter =
  | { operator: 'none' }
  | { operator: 'isNull' }
  | { operator: 'isNotNull' }
  | { operator: 'isTrue' }
  | { operator: 'isFalse' }
  | { operator: 'isEmpty' }
  | { operator: 'isNotEmpty' }
  | { operator: 'eq'; value: string }
  | { operator: 'includes'; value: string }
  | { operator: 'gt'; value: string }
  | { operator: 'gte'; value: string }
  | { operator: 'lt'; value: string }
  | { operator: 'lte'; value: string };

export type TableFilterOperator = TableFilter['operator'];

interface TableFilterState {
  // 필터링을 적용한 column의 id
  id: string;
  // 핉터링 종류
  operator: TableFilterOperator;
  // 필터링 입력 값
  value?: string;
}

interface TableSortState {
  // 정렬을 적용한 column의 id
  id: string;
  // 정렬 방식
  direction: 'ASC' | 'DESC';
}

type TableEditingMode = 'singleClick' | 'doubleClick';

테이블

프로퍼티​

이름 (name)​

레이블 (label)​

데이터 (code)​

테이블 종류 (isDataTable)​

페이지 나누기 (페이지네이션)​

필터링​

정렬​

컬럼 목록 (columnDefinitions)​

컬럼 추가​

컬럼 삭제​

컬럼 숨김​

컬럼 순서 변경​

컬럼 재설정​

추가 기능​

저장 (eventListeners)​

서버 사이드​

서버 사이드 페이징 (isServerSidePaginationEnabled)​

페이지당 개수 (rowsPerPage)​

전체 데이터 개수 (rowsCount)​

서버 사이드 필터링 (isServerSideFilteringEnabled)​

서버 사이드 정렬 (isServerSideSortingEnabled)​

행 선택 옵션 (isRowSelectionEnabled, isMultipleRowSelectionDisabled)​

행 고유 키 선택 (rowKey)​

CSV 다운로드 (isCsvDownloadable)​

고정 높이 설정 (isHeightFixed)​

높이 (contentHeight)​

숨김 (isHidden)​

컬럼 설정​

컬럼 소스​

컬럼 아이디​

컬럼 이름​

컬럼 타입​

지원하는 컴포넌트 종류​

컴포넌트 정렬​

컬럼 너비 설정​

컬럼 고정​

컬럼 숨김​

타입: 버튼​

레이블​

실행 대상​

확인 모달​

비활성화​

색상​

스타일​

타입: 체크박스​

편집 상태​

기본값​

타입: 날짜​

편집 상태​

날짜​

자세한 시각​

타입: 이미지​

링크​

Alt 텍스트​

내용 숨김​

높이 설정​

높이 (px)​

이미지 조정​

패딩​

타입: 링크​

레이블​

링크​

파일 이름​

내용 숨김​

타입: 멀티 셀렉트​

편집 상태​

옵션​

기본값​

플레이스홀더​

줄 바꿈​

타입: 셀렉트​

편집 상태​

옵션​

기본값​

플레이스홀더​

타입: 숫자​

편집 상태​

기본값​

프로퍼티

이름 (name)

레이블 (label)

데이터 (code)

테이블 종류 (isDataTable)

페이지 나누기 (페이지네이션)

필터링

정렬

컬럼 목록 (columnDefinitions)

컬럼 추가

컬럼 삭제

컬럼 숨김

컬럼 순서 변경

컬럼 재설정

추가 기능

저장 (eventListeners)

서버 사이드

서버 사이드 페이징 (isServerSidePaginationEnabled)

페이지당 개수 (rowsPerPage)

전체 데이터 개수 (rowsCount)

서버 사이드 필터링 (isServerSideFilteringEnabled)

서버 사이드 정렬 (isServerSideSortingEnabled)

행 선택 옵션 (isRowSelectionEnabled, isMultipleRowSelectionDisabled)

행 고유 키 선택 (rowKey)

CSV 다운로드 (isCsvDownloadable)

고정 높이 설정 (isHeightFixed)

높이 (contentHeight)

숨김 (isHidden)

컬럼 설정

컬럼 소스

컬럼 아이디

컬럼 이름

컬럼 타입

지원하는 컴포넌트 종류

컴포넌트 정렬

컬럼 너비 설정

컬럼 고정

컬럼 숨김

타입: 버튼

레이블

실행 대상

확인 모달

비활성화

색상

스타일

타입: 체크박스

편집 상태

기본값

타입: 날짜

편집 상태

날짜

자세한 시각

타입: 이미지

링크

Alt 텍스트

내용 숨김

높이 설정

높이 (px)

이미지 조정

패딩

타입: 링크

레이블

링크

파일 이름

내용 숨김

타입: 멀티 셀렉트

편집 상태

옵션

기본값

플레이스홀더

줄 바꿈

타입: 셀렉트

편집 상태

옵션

기본값

플레이스홀더

타입: 숫자

편집 상태

기본값

형식