1 Setup
- 1.1 Create New
- 1.2 Set NodeType
2 Option Detail
- 2.1 Style Option
  - 2.1.1 1. Size
  - 2.1.2 2. Show Empty Data First
  - 2.1.3 3. Hide Title
  - 2.1.4 4. Bordered
  - 2.1.5 5. Fixed Header
  - 2.1.6 6. Fixed Columns
  - 2.1.7 7. Custom Title Style
  - 2.1.8 8. Custom Card Style
- 2.2 Function Option
  - 2.2.1 1. Drag Sort (ASIS: Draggable)
  - 2.2.2 2. Editable
  - 2.2.3 3. Summary
  - 2.2.4 4. Grouping Table Head new
  - 2.2.5 5. Fixed Column Fields new
  - 2.2.6 6. Show MoreLink
  - 2.2.7 7. Personalized Columns
- 2.3 Events Option
  - 2.3.1 1. Event Buttons
  - 2.3.2 2. Pagination
  - 2.3.3 3. Use Extra Buttons
- 2.4 Search Option
  - 2.4.1 1. Search Bar new
  - 2.4.2 2. Table Header Search new
  - 2.4.3 3. Search Form Filter TOBE
  - 2.4.4 4. Connect Search Form
3 Style Set Detail
- 3.1 Simple CSS tobe
- 3.2 Code CSS tobe
- 3.3 Common CSS tobe

Setup

Create New

테이블 컴포넌트를 추가하면 다음과 같은 기본 셋팅 화면이 출력된다. Data를 출력 할 테이블 NodeType, 테이블명 입력, Data Sync와 API 사용여부를 설정 할 수 있다.

Set NodeType

NodeType을 선택하면 다음과 같이 4가지 테이블 셋팅 영역이 출력된다.

Table Field Set Area : 테이블 필드로 사용하고자 하는 Value값 선택하여 테이블을 생성하는 영역
Table Options Set Area : 테이블 옵션을 Style, function, Events, Search 4가지 탭으로 구분하여 제공
Table Click Set Area : 테이블을 Click, Double Click 할 경우 발생하는 이벤트를 설정하는 영역
Table Slot Area : 테이블 필드, 이벤트 버튼, 검색바 필드, 검색폼 필드의 설정 슬롯 영역

Option Detail

테이블 옵션 설정 영역의 Tab 메뉴별 상세 내용은 다음과 같이 4가지로 나뉜다.

Style : 기본으로 셋팅된 테이블 스타일 변경 또는 커스터마이징 스타일 등을 설정하는 영역

function : 테이블 드래그 정렬, 데이터 에디팅과 써머리(SUM), 필드 그룹핑 등의 추가 기능 설정 영역

Events : 버튼과 페이지네이션을 설정하는 영역

Search : 검색바, 검색폼, 테이블 헤더에 사용하는 Filter/Sorter 기능 설정 영역

Style Option

1. Size

테이블 사이즈를 선택 할 수 있다.(Small, Default, Large)

2. Show Empty Data First

No-Data 테이블 리스트를 출력 한다.

Show Empty Data First{ON}

3. Hide Title

컴포넌트 Title은 기본 셋팅 옵션이다. 옵션 영역에서 테이블명을 노출/비노출로 설정 할 수 있다.

Hide Title{OFF}

4. Bordered

테이블 보더의 노출/비노출을 설정한다.

Bordered{ON}

Bordered{OFF}

5. Fixed Header

테이블 헤더를 고정하는 기능으로, 테이블을 상하로 스크롤하여도 테이블 헤더가 고정되어 보인다.

Header Height : 테이블 헤더 높이값 입력 필드

Fixed Header{ON}, Header Height = “600“

6. Fixed Columns

컬럼 각각의 사이즈를 고정시켜 보여 준다.

Fixed Columns{ON}

Fixed Columns{OFF}

7. Custom Title Style

테이블 타이틀 스타일을 설정하는 기능이다. 스타일 설정은 3가지 타입으로 선택하여 진행할 수 있다.

(참고: Table List | Style Set Detail)

8. Custom Card Style

리스트 형태의 테이블을 카드 스타일로 변경 할 수 있다. 스타일 설정은 3가지 타입으로 선택하여 진행할 수 있다.

(참고: Table List | Style Set Detail)

Function Option

Function Tab의 상세 옵션 내용은 다음과 같다.

1. Drag Sort (ASIS: Draggable)

테이블에서 사용 가능한 React-DND(Drag And Drop) 정렬 기능을 제공한다. 드래그 핸들러도 함께 사용 가능하다.

Use Drag handler Field new : 드래그 핸들러 아이콘 필드 사용 여부 추가 설정

Tip Drag handler
테이블 첫번째 열에 드래그 핸들러 아이콘을 노출하여 사용자가 드래그 정렬 기능을 사용 할 수 있음을 쉽게 인지하도록 한다. ant Drag sorting with handler

Drag Sort{ON}, Use Drag handler Field{ON}

2. Editable

테이블 값을 바로 편집할 수 있는 기능으로, 에디팅 Action Field가 테이블 첫번째 열에 추가된다. 수정/저장/취소 편집 기능을 사용 할 수 있으며, Default는 아이콘 버튼으로 출력된다.

Editable Actions Display Type: 에디팅의 액션 필드 디스플레이 타입 선택(Button, Dropdown)

Editable{ON}, Editable Actions Display Type{Button}

3. Summary

써머리 필드 목록이 출력된다. 써머리 할 Value를 선택하면, 해당 필드 최하단에 Data Sum이 출력된다.

Enable Summary Fields : Data Sum을 진행 할 필드 설정

Summary{ON}, Enable Summary Fields = {Number, Rate, Slider, Order No}

4. Grouping Table Head new

테이블 헤더에 있는 필드를 그룹핑하여 보여주는 기능이다. 그룹핑{ON}으로 설정하면, 하단에 Enable Grouping Table Header 영역이 나타난다. [ 그룹핑 레벨 선택 > 그룹명 입력 > 그룹핑 할 필드 선택 ]을 진행하고 저장하기 버튼을 클릭하면, 하단에 있는 Grouping Preview를 확인 할 수 있다. 아이콘을 클릭하여 그룹핑 레벨 범위를 설정하거나, 그룹핑 미리보기 영역 내의 버튼을 클릭하여 설정한 그룹핑을 즉각 삭제 할 수 있다.

Grouping Level : 그룹핑을 진행 할 라벨 선택
Grouping Label : 그룹명 지정
Select Grouping Fields : 그룹핑 할 필드 선택(시작 필드와 종료 필드 선택)

tips Select Grouping Fields
Enable Table List Fields 에서 선택한 Value 목록이 출력되며, 그룹핑은 이웃 필드끼리만 가능하다.
(ex. Field 01, Field 03, Field 05, 3가지 필드를 선택할 경우, Field 01부터 Field05까지 5개 필드가 자동 선택)

[List Field Instance Slot에서 필드 별 그룹핑 진행]

List Field Instance Slot 테이블에 있는 설정 을 이용해 필드 1개씩 그룹핑을 개별 셋팅하는 방법도 있다.

Ex. 필드 2번과 3번을 위와 같이 그룹핑 하고 싶다면

Step 1. 필드 2번 설정을 클릭 > Grouping{ON}, Group Label A입력

Step 2. 필드 3번 설정에 들어가 동일하게 Grouping{ON}, Group Label A를 동일하게 입력하고 저장

5. Fixed Column Fields new

테이블의 특정 필드 Col을 고정하는 기능으로, 테이블을 좌후로 스크롤하여도 선택한 필드 열이 고정되어 보인다.

Fixed Column Position : 고정시킬 컬럼의 위치 선택(Left, Right, Both)
Left/Right Fixed Columns Num : 고정시킬 컬럼의 개수 선택

Option Value	Sub Option
Fixed Column Position `Left`	Left Fixed Columns Num
Fixed Column Position `Right`	Right Fixed Columns Num
Fixed Column Position `Both`	Left Fixed Columns Num, Right Fixed Columns Num

Fixed Column Fields{ON}, Fixed Columns Location{Left}, Fixed Left Columns Num(2)

6. Show MoreLink

테이블 상단에 [more] 버튼으로 링크로 더 많은 정보를 사용자에게 전달하거나, 관련 페이지로 이동을 유도할 수 있다.

MoreLink URL : 버튼에 연결시킬 URL 입력

7. Personalized Columns

"Enable List Fields" 실시간 설정 기능으로 사용자별(End-User) 맞춤 테이블 필드 보기가 가능하다. Personalized Columns{ON} 설정 시, 테이블 우측 상단에 [Personalized Columns] 버튼이 생성된다. 이 버튼에는 테이블 필드 설정 Modal이 연결되어 있으며, 사용자들은 이를 통해 테이블 필드 Value 값을 재설정하고, 실시간으로 테이블에 적용시켜 맞춤형 테이블로 사용할 수 있다.

Events Option

Events Tab의 상세 옵션 내용은 다음과 같다.

1. Event Buttons

이벤트 버튼 목록과 함께 테이블 데이터 선택 타입, 버튼의 위치와 정렬 설정 옵션이 출력된다.

Enable List Event Buttons : 이벤트 버튼 목록(Create, Read, Update, Delete, List)
Data Select Field tobe : 테이블 데이터 선택하는 필드 사용(No Use, Radio, Checkbox)
Event Buttons Position : 버튼 위치 선택(Top, Bottom, Both)
- Top/Bottom Event Buttons Align : 버튼 정렬 선택(Left, Center, Right)

Option Value	Sub Option
Event Buttons Position `Top`	Top Event Buttons Align
Event Buttons Position `Bottom`	Bottom Event Buttons Align
Event Buttons Position `Both`	Top Event Buttons Align, Bottom Event Buttons Align

Tip Data Select Field
Radio 또는 Checkbox를 선택하면, 테이블 첫번째 열에 데이터 선택 필드가 신규로 생성된다. 이 옵션은 보편적으로 테이블 목록을 선택하여 진행 할 수 있는 Event Buttons(수정/삭제)을 사용할 경우 함께 설정한다.
- No Use : 테이블 목록을 선택해야 하는 이벤트 버튼을 사용하지 않는 경우 사용
- Radio : 라디오 버튼 타입으로 데이터 선택 필드 생성, 단일 선택만 허용할 경우 사용
- Checkbox : 체크박스 타입으로 데이터 선택 필드 생성, 다중 선택을 허용할 경우 사용

Event Buttons{ON}, Data Select Field{No Use}

Event Buttons{ON}, Data Select Field{Radio}

Event Buttons{ON}, Data Select Field{Checkbox}

2. Pagination

테이블 페이지네이션의 Total Count 정보 노출 여부와 페이지네이션 위치와 정렬 설정 옵션이 출력된다.

Show Total Count : 출력된 테이블 목록 총합 출력
Pagination Position : 페이지네이션 위치 선택(Top, Bottom, Both)
- Top/Bottom Pagination Align : 페이지네이션 정렬 선택(Left, Center, Right)

Option Value	Sub Option
Pagination Position `Top`	Top Pagination Align
Pagination Position `Bottom`	Bottom Pagination Align
Pagination Position `Both`	Top Pagination Align, Bottom Pagination Align

Pagination{ON}, Show Total Count{ON}

Pagination Position{Bottom}, Bottom Pagination Align{Right}

List Default PageSize: 테이블 목록 개수 Default 설정, 이 값을 기준으로 페이징 처리 진행
List Show PageSize Changer: 테이블 목록 개수를 실시간으로 변경하여 보는 옵션으로 페이징도 함께 실시간 적용
- List PageSize Changer : 테이블 목록 Row 개수 변경 옵션 다중 선택(10, 20, 50, 100)

Tip List Default PageSize & List PageSize Changer
List Default PageSize 값입력 O → List Page Size Changer 선택 옵션에 Default 값이 포함되어 출력
List Default PageSize 값입력 X → List PageSize Changer의 최소 단위인 10 으로 자동 셋팅

List Default PageSize(5)

List Show PageSize Changer{ON}, List PageSize Changer(10, 20, 50, 100)

List Default PageSize(10)

List Show PageSize Changer{ON}, List PageSize Changer(10)

3. Use Extra Buttons

제공하는 이벤트 버튼 외에 추가로 버튼을 생성하여 사용할 수 있다. Extra Buttons{ON}으로 설정하면 하단에 Extra Button Table 영역이 출력된다. 아이콘을 클릭하고 원하는 버튼 컴포넌트를 추가할 수 있다. Extra Buttons을 사용하면, 테이블 마지막 열에 각 Row에 적용 가능한 Action 필드가 신규 생성된다.