테이블

표 형태의 데이터를 볼 수 있습니다. 정렬, 필터링, 페이지 나누기, 서버 테이블, csv 다운로드 및 다양한 기능을 제공합니다.

프로퍼티

프로퍼티	타입	설명
이름 (name)	`string`	테이블 컴포넌트의 고유 이름
레이블 (label)	`string`	테이블 헤더에 표기되는 텍스트
데이터 (code)	`string` (`Record<string, unknown>[]`)	테이블에 표기할 데이터
테이블 종류 (isDataTable)	`boolean`	`true`: 데이터 테이블(페이지 나누기, 정렬, 필터링, 서버 페이징 활성화) `false`: 기본 테이블
행 선택 옵션(행 선택 활성화, 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)	`boolean`	배포된 페이지에서 테이블 숨김 여부

이름 (name)

테이블 컴포넌트의 고유 이름을 입력할 수 있는 프로퍼티입니다. 이름 규칙을 참고해주세요.

레이블 (label)

테이블 상단에 표기되는 텍스트를 입력할 수 있는 프로퍼티입니다.

데이터 (code)

테이블에 표기할 데이터를 입력할 수 있는 프로퍼티입니다. 데이터는 2가지 방식으로 입력할 수 있습니다.

직접 데이터 입력하기

데이터 프로퍼티에 배열을 직접 넣어 테이블을 만들 수 있습니다.
예시:

[
  { 이름: '크러쉬', 곡: '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`인 열을 필터링합니다.

연산자에 따라서 값을 입력하게 되면 필터링이 적용됩니다.

컬럼 재설정

컬럼을 재설정할 수 있는 프로퍼티입니다. 기존에 설정해둔 컬럼 정보가 삭제되고, 현재 테이블 데이터를 결과값을 기반으로 컬럼 정보가 재설정됩니다.

행 선택 옵션 (isRowSelectionEnabled, isMultipleRowSelectionDisabled)

행 선택 옵션을 선택할 수 있는 프로퍼티입니다.
단일 행 선택시 하나의 행을 선택할 수 있고, 복수 행 선택시 좌측 체크박스를 이용해 여러 행을 선택할 수 있습니다.
행 선택시 selectedRows 등 각종 선택 상태를 활용할 수 있습니다.

복수 행 선택 후 좌측 체크박스 헤더 선택시 해당 페이지의 행들이 선택되며, 모든 행 선택하기를 클릭하면 모든 행이 선택됩니다.

행 고유 키 선택 (rowKey)

행의 고유 키를 선택 또는 입력할 수 있는 프로퍼티입니다.
행 선택시 같은 값을 가진 행이 중복 선택 되지 않도록 행의 고유한 키를 선택합니다.
선택하지 않으면 selectedRows가 페이지 내에서만 동작합니다.

편집 방법 (editingMode)

테이블 셀을 편집할 때 사용할 방법을 선택할 수 있는 프로퍼티입니다.

바로(always): 편집할 수 있는 필드가 항상 보입니다.
한번 클릭(singleClick): 셀을 한 번 클릭하면 필드를 편집하는 상태가 됩니다.

서버 페이징 (isServerSidePaginationEnabled)

데이터 테이블일 때 서버 페이지 나누기(페이지네이션) 기능을 활성화할 수 있는 프로퍼티입니다.
활성화하면 서버에서 데이터를 페이지로 나누어 가지고 올 수 있도록 page 상태를 추가하고 현재 테이블 내부에 페이지 나누기가 적용되지는 않습니다.
자세한 상태는 하단 문서를 참조해주세요.

페이지당 개수 (rowsPerPage)

서버 페이징 프로퍼티가 활성화되어 있을 때 서버에서 가져올 페이지당 행 개수를 입력할 수 있는 프로퍼티입니다.
워크플로우의 실행 결과를 사용하거나 직접 값을 입력하여 페이지당 행 개수를 설정할 수 있습니다.

전체 데이터 개수 (rowsCount)

서버 페이징 프로퍼티가 활성화되어 있을 때 서버에서 가져올 전체 행 개수를 입력할 수 있는 프로퍼티입니다.
워크플로우의 실행 결과를 사용하거나 직접 값을 입력하여 전체 데이터 개수를 설정할 수 있습니다.

서버 필터링 (isServerSideFilteringEnabled)

서버 페이징이 활성화되어 있을 때 서버 정렬 기능을 활성화할 수 있는 프로퍼티입니다.
활성화하면 서버에서 데이터를 필터링해 원하는 데이터만 가지고 올 수 있도록 filters 상태를 추가하고 현재 테이블 내부에 필터링이 적용되지는 않습니다.
자세한 필터링 상태는 하단 문서를 참조해주세요.

서버 정렬 (isServerSideSortingEnabled)

서버 페이징이 활성화되어 있을 때 서버 정렬 기능을 활성화할 수 있는 프로퍼티입니다.
활성화하면 서버에서 데이터를 정렬해서 가지고 올 수 있도록 sort 상태를 추가하고 현재 테이블 내부에 정렬이 적용되지는 않습니다.
자세한 정렬 상태는 하단 문서를 참조해주세요.

CSV 다운로드 (isCsvDownloadable)

테이블 데이터 CSV 다운로드 가능 여부를 선택 할 수 있는 프로퍼티입니다.
활성화하면 테이블 헤더 우측 다운로드 버튼을 통해 현재 테이블 데이터의 csv파일을 다운로드할 수 있습니다.

고정 높이 설정 (isHeightFixed)

고정 높이 설정 여부를 선택하는 프로퍼티입니다.
고정 높이를 설정하지 않으면 컴포넌트 내부 크기에 맞추어 높이가 늘어납니다.

높이 (contentHeight)

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

컴포넌트 숨김 (isHidden)

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

컬럼 설정

테이블 컬럼의 우측 또는 좌측의 설정 버튼을 클릭하면 각 컬럼마다 다양한 설정을 추가할 수 있습니다.

컬럼 소스

입력한 데이터에 따라 컬럼의 소스를 선택할 수 있습니다. 테이블의 각 셀 값은 사용자가 선택한 컬럼의 소스 및 설정에 따라 결정됩니다.

컬럼의 타입에 따라 셀의 값이 변경될 수 있으며, 예를 들어 텍스트 필드인 경우 셀 내부에서 값을 조작할 수 있습니다. 이때 셀의 값은 일반적으로 기본값이 됩니다.

셀의 값은 컬럼 설정 내부의 코드나 템플릿에서 item을 통해 가져올 수 있습니다. 또한 각 셀의 값을 나타내는데 사용되는 row와 같은 현재 행의 데이터를 참조할 수 있습니다.

테이블 컴포넌트 외부에서 테이블 데이터에 접근할 때도 각 셀의 값이 사용됩니다

컬럼 타입

테이블에 표기할 컴포넌트 종류를 선택 할 수 있습니다.
선택한 컬럼 타입에 따라 추가 설정이 가능합니다. 컬럼 타입에 따른 추가 설정은 하단의 문서를 참고해주세요.

컴포넌트 종류

현재 지원하는 컴포넌트 종류는 버튼, 체크박스, 날짜, 이미지, 링크, 멀티 셀렉트, 숫자, 셀렉트, 텍스트, 텍스트 필드입니다.

컬럼 세부 설정

설정 창의 왼쪽 하단 버튼을 클릭하면 세부 설정창을 통해 이름, 아이디, 정렬, 너비, 열 고정 등 다양한 세부 설정을 할 수 있습니다.

컬럼 이름

테이블 맨 위 컬럼 제목에 보이는 이름입니다.

컬럼 아이디

코드 상에서 컬럼을 결정하는 아이디입니다. 테이블 내에서 유일한 값이어야 합니다.

테이블 컴포넌트 외부에서 테이블의 data에 접근할 때, 각 셀의 키 값으로 사용됩니다. 컬럼 아이디가 중복될 경우, 테이블의 data에서 컬럼의 데이터가 무시될 수 있습니다.

데이터 정렬

컬럼 내부 데이터를 정렬합니다. 왼쪽, 가운데, 오른쪽 중 선택할 수 있습니다.

컬럼 너비 설정

자동을 선택할 시 자동으로 컬럼 너비가 설정됩니다. 수동으로 설정하고 값을 입력하면 값에 맞게 컬럼의 너비가 설정됩니다.

컬럼 고정 여부

활성화하면 해당 컬럼을 고정할 수 있습니다.

항상 테이블 왼쪽에 고정하며 여러개의 컬럼을 고정할 수도 있습니다.

컬럼 복제

컬럼을 복제하여 동일한 컬럼을 테이블의 마지막 열에 추가합니다.

컬럼 삭제

컬럼을 삭제합니다.

컬럼 이동

설정창 하단의 좌, 우 아이콘을 통해 컬럼의 순서를 이동할 수 있습니다.

타입: 버튼

레이블

템플릿을 사용하여 버튼의 레이블을 입력할 수 있습니다.

실행 대상

버튼을 클릭했을 때 다음과 같은 실행 대상을 지정할 수 있습니다.

페이지로 이동

이동할 페이지를 선택할 수 있습니다.
선택한 페이지에 변수가 있다면 값을 전달할 수 있습니다.

워크플로우 실행

실행할 워크플로우를 선택할 수 있습니다.
선택한 워크플로우에 변수가 있다면 값을 전달할 수 있습니다.

모달 열기 혹은 닫기

열거나 닫을 모달을 선택할 수 있습니다.
모달 여닫기 여부를 선택할 수 있습니다.

확인 모달 팝업

버튼을 클릭했을 때 실행 확인을 위한 추가 모달 표시 여부를 설정할 수 있습니다.

추후 버튼을 클릭하면 다음과 같은 확인 모달이 표시됩니다.

컴포넌트 비활성화

값을 true로 설정하면 버튼을 비활성화합니다.

컴포넌트 숨김

값을 true로 설정하면 버튼을 테이블에서 숨깁니다.

스타일

버튼의 스타일을 변경할 수 있습니다.

타입: 체크박스

기본값

체크박스의 기본값을 입력할 수 있습니다.

컴포넌트 비활성화

값을 true로 설정하면 체크박스를 비활성화합니다.

컴포넌트 숨김

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

타입: 날짜

날짜

날짜의 기본값을 입력할 수 있습니다. 워크플로우의 실행 결과를 사용하거나 직접 값을 입력 또는 달력 아이콘을 클릭하여 선택할 수 있습니다.

자세한 시각

활성화하면 시, 분, 초, 시간대까지 입력이 가능합니다.

컴포넌트 비활성화

값을 true로 설정하면 날짜를 비활성화합니다.

컴포넌트 숨김

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

타입: 이미지

링크

이미지의 링크를 입력할 수 있습니다.

Alt 텍스트

이미지의 Alt 텍스트를 입력할 수 있습니다.

컴포넌트 숨김

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

타입: 링크

레이블

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

링크

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

다운로드 이름

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

컴포넌트 숨김

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

타입: 숫자

코드

숫자의 코드를 입력할 수 있습니다.

타입: 셀렉트

코드

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

예시:

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

기본값

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

플레이스홀더

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

컴포넌트 비활성화

값을 true로 설정하면 셀렉트를 비활성화합니다.

컴포넌트 숨김

값을 true로 설정하면 셀렉트를 테이블에서 숨깁니다.

타입: 멀티 셀렉트

코드

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

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

기본값

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

플레이스홀더

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

컴포넌트 비활성화

값을 true로 설정하면 멀티 셀렉트를 비활성화합니다.

컴포넌트 숨김

값을 true로 설정하면 멀티 셀렉트를 테이블에서 숨깁니다.

타입: 텍스트

레이블

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

스타일

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

컴포넌트 숨김

값을 true로 설정하면 텍스트를 테이블에서 숨깁니다.

타입: 텍스트 필드

기본값

텍스트 필드의 기본값을 입력할 수 있습니다.

유효성 검사

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

삼항 연산자를 이용해 별도의 에러메세지를 표시할 수 있습니다.

플레이스홀더

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

컴포넌트 비활성화

값을 true로 설정하면 텍스트 필드를 비활성화합니다.

컴포넌트 숨김

값을 true로 설정하면 텍스트 필드를 테이블에서 숨깁니다.

타입: 숫자

기본값

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

형식

숫자를 표시하는 방법입니다. 일반을 선택하면 숫자를 일반 형식으로 표시합니다.

소수점 자릿수

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

자릿수 채우기

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

콤마 표시

스위치를 활성화하면 1,000의 자리마다 콤마를 표시합니다.

유효성 검사

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

플레이스홀더

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

정렬

필드 내부 데이터를 선택한 방향에 맞게 정렬합니다.

타입: 텍스트

기본값

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

스타일

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

색상

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

유효성 검사

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

플레이스홀더

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

상태

프로퍼티	타입	설명
원본 데이터 (originalData)	`Record<string, unknown>[]`	테이블의 데이터 프로퍼티에 입력한 원본 데이터
데이터 (data)	`Record<string, unknown>[]`	컬럼 순서 및 컬럼 설정이 적용된 현재 테이블 뷰 기준 데이터
선택 된 행의 index (selectedRowIndex)	`Optional(number)`	테이블의 선택 된 행의 index
선택 된 행 (selectedRow)	`Optional(unknown)`	테이블의 선택 된 행
선택 된 행의 key (selectedRowKey)	`Optional(unknown)`	테이블의 선택 된 행의 key
선택 된 행의 index 목록 (selectedRowIndicies)	`Optional(number[])`	테이블의 선택 된 복수 행의 index 목록
선택 된 행 목록 (selectedRows)	`Optional(unknown[])`	테이블의 선택 된 복수 행 목록
선택 된 복수 행의 key 목록 (selectedRowKeys)	`Optional(unknown[])`	테이블의 선택 된 복수 행의 key 목록
전체 데이터 개수 (rowsCount)	`Optional(number)`	테이블의 전체 행 개수
페이지당 행 개수 (rowsPerPage)	`Optional(number)`	페이지 나누기 기능이 활성화된 테이블의 페이지당 행 개수
서버 페이징 데이터 (page)	`Optional(TablePageState)`	서버 페이징 기능이 활성화된 테이블의 페이지 데이터
서버 필터링 데이터 (filters)	`Optional(TableFilterState[])`	서버 필터링 기능이 활성화된 테이블의 필터링 데이터
서버 정렬 데이터 (sort)	`Optional(TableSortState)`	서버 정렬 기능이 활성화된 테이블의 정렬 데이터

타입 정의

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';
}

테이블

프로퍼티​

이름 (name)​

레이블 (label)​

데이터 (code)​

테이블 종류 (isDataTable)​

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

정렬​

필터링​

컬럼 재설정​

행 선택 옵션 (isRowSelectionEnabled, isMultipleRowSelectionDisabled)​

행 고유 키 선택 (rowKey)​

편집 방법 (editingMode)​

서버 페이징 (isServerSidePaginationEnabled)​

페이지당 개수 (rowsPerPage)​

전체 데이터 개수 (rowsCount)​

서버 필터링 (isServerSideFilteringEnabled)​

서버 정렬 (isServerSideSortingEnabled)​

CSV 다운로드 (isCsvDownloadable)​

고정 높이 설정 (isHeightFixed)​

높이 (contentHeight)​

컴포넌트 숨김 (isHidden)​

컬럼 설정​

컬럼 소스​

컬럼 타입​

컴포넌트 종류​

컬럼 세부 설정​

컬럼 이름​

컬럼 아이디​

데이터 정렬​

컬럼 너비 설정​

컬럼 고정 여부​

컬럼 복제​

컬럼 삭제​

컬럼 이동​

타입: 버튼​

레이블​

실행 대상​

확인 모달 팝업​

컴포넌트 비활성화​

컴포넌트 숨김​

스타일​

타입: 체크박스​

기본값​

컴포넌트 비활성화​

컴포넌트 숨김​

타입: 날짜​

날짜​

자세한 시각​

컴포넌트 비활성화​

컴포넌트 숨김​

타입: 이미지​

링크​

Alt 텍스트​

컴포넌트 숨김​

타입: 링크​

레이블​

링크​

다운로드 이름​

컴포넌트 숨김​

타입: 숫자​

코드​

타입: 셀렉트​

코드​

기본값​

플레이스홀더​

컴포넌트 비활성화​

컴포넌트 숨김​

타입: 멀티 셀렉트​

코드​

기본값​

플레이스홀더​

컴포넌트 비활성화​

컴포넌트 숨김​

타입: 텍스트​

레이블​

스타일​

컴포넌트 숨김​

타입: 텍스트 필드​

기본값​

프로퍼티

이름 (name)

레이블 (label)

데이터 (code)

테이블 종류 (isDataTable)

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

정렬

필터링

컬럼 재설정

행 선택 옵션 (isRowSelectionEnabled, isMultipleRowSelectionDisabled)

행 고유 키 선택 (rowKey)

편집 방법 (editingMode)

서버 페이징 (isServerSidePaginationEnabled)

페이지당 개수 (rowsPerPage)

전체 데이터 개수 (rowsCount)

서버 필터링 (isServerSideFilteringEnabled)

서버 정렬 (isServerSideSortingEnabled)

CSV 다운로드 (isCsvDownloadable)

고정 높이 설정 (isHeightFixed)

높이 (contentHeight)

컴포넌트 숨김 (isHidden)

컬럼 설정

컬럼 소스

컬럼 타입

컴포넌트 종류

컬럼 세부 설정

컬럼 이름

컬럼 아이디

데이터 정렬

컬럼 너비 설정

컬럼 고정 여부

컬럼 복제

컬럼 삭제

컬럼 이동

타입: 버튼

레이블

실행 대상

확인 모달 팝업

컴포넌트 비활성화

컴포넌트 숨김

스타일

타입: 체크박스

기본값

컴포넌트 비활성화

컴포넌트 숨김

타입: 날짜

날짜

자세한 시각

컴포넌트 비활성화

컴포넌트 숨김

타입: 이미지

링크

Alt 텍스트

컴포넌트 숨김

타입: 링크

레이블

링크

다운로드 이름

컴포넌트 숨김

타입: 숫자

코드

타입: 셀렉트

코드

기본값

플레이스홀더

컴포넌트 비활성화

컴포넌트 숨김

타입: 멀티 셀렉트

코드

기본값

플레이스홀더

컴포넌트 비활성화

컴포넌트 숨김

타입: 텍스트

레이블

스타일

컴포넌트 숨김

타입: 텍스트 필드

기본값

유효성 검사