| Table of Contents |
|---|
https://docs.google.com/spreadsheets/d/1GR0ElwGus8dPp79svWeYp6PpPWBJxpdREgMMNHA8RHM/edit#gid=0
...
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
After selecting a NodeType, user is able to set up the 4 main sections as bellow:
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 메뉴별 상세 내용은 다음과 같다.
Style : 기본적으로 셋팅된 테이블 스타일 변경 또는 커스터마이징 스타일 등을 설정하는 영역
...
function : 테이블 드래그 정렬, 데이터 에디팅과 써머리(SUM), 필드 그룹핑 등의 추가 기능 설정 영역
...
Events : 버튼과 페이지네이션을 설정하는 영역
...
Search : 검색바, 검색폼, 테이블 헤더에 사용하는 Filter/Sorter 기능 설정 영역
...
...
Style Option
1. Size
테이블 사이즈 선택(Small, Default, Large)
...
| Status | ||||
|---|---|---|---|---|
|
4. Bordered
테이블 보더 노출/비노출 설정
...
| Status | ||||
|---|---|---|---|---|
|
...
6. Show MoreLink
테이블 상단에 [more] 을 추가하여 링크로 더 많은 정보를 사용자에게 전달 할 수 있다.
...
| Status | ||||
|---|---|---|---|---|
|
Data Select Field
Status
colour Green title Tip 테이블 첫번째 Col에 데이터 선택 필드가 생성되며, 선택 타입을 2가지로 선택 가능하다.
- Radio : 라디오 버튼 타입으로 데이터 선택 필드 생성, 단일 선택만 허용할 경우 사용
- Checkbox : 체크박스 타입으로 데이터 선택 필드 생성, 다중 선택을 허용할 경우 사용
...
| Status | ||||
|---|---|---|---|---|
|
| Status | ||||
|---|---|---|---|---|
|
| Status | ||||
|---|---|---|---|---|
|
3. Use Same Line
| Status | ||||
|---|---|---|---|---|
|
...
자주 쓰이는 CSS 목록에서 원하는 스타일을 선택하는 방법이다.
...
...
To be deleted?
| Status | ||||
|---|---|---|---|---|
|
...