| Table of Contents |
|---|
...
Setup
Create New
After drag a Table List into editor2, we can choose a setting to set up the Table List.
Basically, choose a NodeType for data display, table name or use API option for sync the data
테이블 컴포넌트를 추가하면 다음과 같은 기본 셋팅 화면이 출력된다. Data를 출력 할 테이블 NodeType, 테이블명 입력, Data Sync와 API 사용여부를 설정 할 수 있다.
...
Set NodeType
...
NodeType을 선택하면 다음과 같이 4가지 테이블 셋팅 영역이 출력된다.
...
테이블 옵션 설정 영역의 Tab 메뉴별 상세 내용은 다음과 같이 4가지로 나뉜다.
Style : 기본적으로 기본으로 셋팅된 테이블 스타일 변경 또는 커스터마이징 스타일 등을 설정하는 영역
...
2. Show Empty Data First
No-Data 리스트 테이블을 테이블 리스트를 출력 한다.
| Info |
|---|
Show Empty Data First{ON} |
...
3. Hide Title
컴포넌트 Title은 기본 셋팅 옵션이다. 옵션 영역에서 테이블명을 노출/비노출로 설정 할 수 있다.
| Info |
|---|
Hide Title{OFF} |
...
Header Height : 테이블 헤더 높이값 입력 필드
| Info |
|---|
Fixed Header{ON}, Header Height = “600“ |
...
6. Fixed Columns
컬럼 각각의 사이즈를 고정시켜 보여 준다.
...
1. Drag Sort (ASIS: Draggable)
테이블에서 사용 가능한 React-DND(Drag And Drop) 정렬 기능으로, 기능을 제공한다. 드래그 핸들러도 함께 사용 가능하다.
Use Drag handler Field
: 드래그 핸들러 아이콘 필드 사용 여부 추가 설정Status colour Yellow title new
...
테이블 값을 바로 편집할 수 있는 기능으로, 에디팅 아이콘 Action Field가 테이블 첫번째 열에 추가된다. 에디팅 아이콘을 클릭하면, 해당 Row에 Data를 바로 편집할 수 있다수정/저장/취소 편집 기능을 사용 할 수 있으며, Default는 아이콘 버튼으로 출력된다.
Editable Actions Display Type: 에디팅의 액션 필드 디스플레이 타입 선택(
Button,Dropdown)
| Info |
|---|
Editable{ON}, Editable Actions Display Type{Button} |
...
3. Summary
써머리 필드 목록이 출력된다. 써머리 할 Value를 선택하면, 해당 필드 최하단에 Data Sum이 출력된다.
Enable Summary Fields : Data Sum을 진행 할 필드 설정
| Info |
|---|
Summary{ON}, Enable Summary Fields = {Number, Rate, Slider, Order No} |
...
4. Grouping Table Head
| Status | ||||
|---|---|---|---|---|
|
...
Select Grouping Fields
Status
colour Green title tips
Enable Table List Fields에서 선택한 Value 목록이 출력되며, 그룹핑은 이웃 필드끼리만 가능하다.(ex. Field 01, Field 03, Field 05, 3가지 필드를 선택할 경우, Field 01부터 Field05까지 5개 필드가 자동 선택)
...
List Field Instance Slot 테이블에 있는 설정  |
Ex. 필드 2번과 3번을 위와 같이 그룹핑 하고 싶다면 Step 1. 필드 2번 설정을 클릭 > Grouping{ON}, Group Label  Step 2. 필드 3번 설정에 들어가 동일하게 Grouping{ON}, Group Label  |
[List Field Instance Slot에서 필드 별 그룹핑 진행]
을 이용해 필드 1개씩 그룹핑을 개별 셋팅하는 방법도 있다. 5. Fixed Column Fields
| Status | ||||
|---|---|---|---|---|
|
테이블의 특정 필드의 필드 Col을 고정하는 기능으로, 테이블을 좌후로 스크롤하여도 선택한 필드 열이 고정되어 보인다.
...
6. Show MoreLink
테이블 상단에 [more] 버튼으로 링크로 더 많은 정보를 사용자에게 전달하거나, 관련 페이지로 이동을 유도할 수 있다.
...
테이블 페이지네이션의 Total Count 정보 노출 여부와 페이지네이션 위치와 정렬 설정 옵션이 출력된다.
Pagination Total Count : 페이징 출력된 테이블 목록 총합 출력
Pagination Position : 페이지네이션 위치 선택(
Top,Bottom,Both)Top/Bottom Pagination Align : 페이지네이션 정렬 선택(
Left,Center,Right)
...
List Default PageSize & List PageSize Changer
Status
colour Green title Tip List Default PageSize 값입력 O → List Page Size Changer 다중선택 선택 옵션에 Default 값이 포함되어 출력
List Default PageSize 값입력 X → List PageSize Changer의 최소 단위인
10으로 자동 셋팅
...