본문으로 건너뛰기

테이블

표 형태의 데이터를 볼 수 있습니다.

프로퍼티

프로퍼티타입설명
이름 (name)string테이블 컴포넌트의 고유 이름
레이블 (label)string테이블에 표기되는 텍스트
코드 (code)string (Record<string, unknown>[])테이블에 표기할 데이터
CSV 다운로드 가능 여부 (isCsvDownloadable)boolean테이블 데이터 CSV 다운로드 가능 여부
데이터 테이블 활성화 여부 (isDataTable)boolean페이지 나누기, 정렬, 필터링, 열 숨기기 기능 활성화 여부

이름 (name)

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

레이블 (label)

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

코드 (code)

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

  1. 직접 데이터 입력하기

    • 코드 프로퍼티에 배열을 직접 넣어 테이블을 만들 수 있습니다.
    • 예시:
    [
    { 이름: '크러쉬', : '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, 장르: '발라드' },
    ];
  2. 등록된 쿼리 데이터로 입력하기

    • 등록된 쿼리의 데이터가 배열을 반환 한다면 쿼리의 데이터를 넣어 줄 수 있습니다.
    • 예시: query1 이름을 가진 쿼리가 아래 데이터를 반환 한다면 query1.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, 장르: '발라드' },
    ];

CSV 다운로드 (isCsvDownloadable)

테이블 데이터 CSV 다운로드 가능 여부를 선택 할 수 있는 프로퍼티 입니다.

데이터 테이블 활성화 (isDataTable)

데이터 테이블 활성화 여부를 선택할 수 있는 프로퍼티 입니다.
데이터 테이블로 전환해 페이지 나누기, 정렬, 필터링, 열 숨기기 기능을 활성화 할 수 있습니다.

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

데이터 테이블로 전환 시, 기본적으로 페이지 나누기 기능이 활성화됩니다.
페이지 나누기는 서버가 아닌 클라이언트에서 실행되어 나타나게 됩니다. 서버 기반의 페이지 나누기는 추후에 도입 예정입니다.

하단에서 페이지당 행과 현재 페이지, 총 페이지를 확인할 수 있습니다.
다음 페이지로 이동, 이전 페이지로 이동 버튼으로 페이지를 이동할 수 있습니다.

페이지당 행의 갯수는 기본적으로 100으로 설정되어 있습니다. 10, 20, 50, 100 단위로 조정할 수 있습니다.

정렬

각 컬럼에 정렬 기능을 활성화 할 수 있습니다.
액션 컬럼이 아닌 일반 컬럼에만 정렬을 활성화 할 수 있습니다. 기본적으로는 모두 정렬 해제 상태입니다.

컬럼에 마우스를 올려놓으면 활성화되는 정렬 아이콘을 통해 정렬을 오름차순, 내림차순, 정렬 해제 상태로 만들 수 있습니다.

메뉴 아이콘을 클릭해 나타나는 메뉴에서도 정렬을 선택할 수 있습니다.

하나의 테이블 내에서는 하나의 컬럼에만 정렬을 적용할 수 있습니다.

정렬 기준은 문자를 기준으로 정렬이 적용됩니다.

필터링

각 컬럼에 필터링 기능을 활성화 하여 특정 조건의 열만 보여지게 할 수 있습니다. 액션 컬럼이 아닌 일반 컬럼에만 정렬을 활성화 할 수 있습니다.
하나의 테이블 내에서는 하나의 컬럼에만 필터링을 적용할 수 있습니다.

메뉴 아이콘을 클릭 하여 나타나는 메뉴에서 필터를 선택해 필터 내용을 입력할 수 있습니다.

  1. 목록에서 필터링을 적용할 열을 선택할 수 있습니다.

  2. 연산자에서 필터링이 적용되는 방식을 선택할 수 있습니다. 필터링에서 사용할 수 있는 연산자는 다음과 같습니다.

  • 포함하는: 입력하는 값을 포함하는 열을 필터링합니다.
  • 값이 같은: 입력하는 값과 같은 열을 필터링합니다.
  • 시작하는: 입력하는 값으로 시작하는 열을 필터링합니다.
  • 끝나는: 입력하는 값으로 끝나는 열을 필터링합니다.
  • 값이 없는: 값이 없는 열을 필터링합니다.
  • 값이 있는: 값이 존재하는 열을 필터링합니다.
  • 값 중 하나인: 입력하는 값들 중 하나에 해당하는 열을 필터링합니다.
  1. 연산자에 따라서 값을 입력하게 되면 필터링이 적용됩니다.

열 숨기기 및 관리

특정 컬럼을 숨기거나 보이게 할 수 있습니다.
액션 컬럼이 아닌 일반 컬럼만 숨길 수 있습니다. 액션 컬럼의 경우 컴포넌트 비활성화 기능을 통해 비활성화할 수 있습니다.

메뉴 아이콘을 클릭 하여 나타나는 메뉴에서 열 숨기기를 선택해 컬럼을 숨길 수 있습니다.

메뉴에서 보이는 열 설정을 선택해 컬럼을 숨겨진 열을 다시 보이게 하거나 다시 숨기게 할 수 있습니다.
모두 숨기기 혹은 모두 보기를 통해 전체 열을 보이거나 숨기게 할 수 있습니다.

액션 컬럼

테이블에는 액션 컬럼을 추가하거나 수정 또는 삭제를 할 수 있습니다.

액션 추가

테이블 우측 상단의 + 버튼을 클릭 하여 액션을 추가할 수 있습니다.

액션 수정

추가 된 액션 헤더의 오른쪽 버튼을 클릭하여 수정 할 수 있습니다.

액션 삭제

추가 된 액션 헤더의 오른쪽 버튼을 클릭하여 삭제 할 수 있습니다.

컴포넌트 설정

컴포넌트 설정에서는 컴포넌트의 종류를 선택할 수 있습니다.

컴포넌트 종류

테이블에 표기할 컴포넌트 종류를 선택 할 수 있습니다. 현재 액션에는 버튼과 텍스트 필드가 있습니다.

컴포넌트 비활성화

컴포넌트는 코드에 따라 활성화/비활성화 여부를 선택 할 수 있습니다.
row를 통해 현재 행의 데이터를 얻어 올 수 있습니다.

속성: 버튼

버튼 이름 정의

템플릿을 사용 하여 테이블에 표기 될 버튼의 이름을 정의할 수 있습니다.

버튼 액션 동작 정의

액션은 2가지 동작을 할 수 있습니다.

  1. 페이지로 이동
  • 액션 버튼이 클릭 될 때 이동할 페이지를 선택할 수 있습니다.
  • 선택한 페이지의 변수가 있다면 값을 전달할 수 있습니다.
  1. 쿼리 & 워크플로우 실행
  • 액션 버튼이 클릭 될 때 실행 될 쿼리 혹은 워크플로우를 선택할 수 있습니다.

추가 된 버튼 컬럼

추가 된 버튼 컬럼은 다음과 같이 확인할 수 있습니다.

속성: 텍스트 필드

기본값 정의

테이블의 표기 될 텍스트 필드의 기본겂을 정의 할 수 있습니다.
row를 통해 현재 행의 데이터를 얻어 올 수 있습니다.

추가 된 텍스트 필드 컬럼

추가 된 텍스트 필드 컬럼은 다음과 같이 확인할 수 있습니다.

상태

프로퍼티타입설명
데이터 (data)Record<string, unknown>[]테이블의 데이터
선택 된 행 (selectedRow)Optional(unknown)테이블의 선택 된 행
선택 된 행의 index (selectedRowIndex)Optional(number)테이블의 선택 된 행의 index