Table of Contents |
---|
Setup
Create New
...
Status | ||||
---|---|---|---|---|
|
Data Select Field
Status
colour Green title Tip 테이블 첫번째 Col에 데이터 선택 필드가 생성되며, 선택 타입을 2가지로 선택 가능하다.
- Radio : 라디오 버튼 타입으로 데이터 선택 필드 생성, 단일 선택만 허용할 경우 사용
- Checkbox : 체크박스 타입으로 데이터 선택 필드 생성, 다중 선택을 허용할 경우 사용
...
Status | ||||
---|---|---|---|---|
|
Status | ||||
---|---|---|---|---|
|
Status | ||||
---|---|---|---|---|
|
3. Use Same Line
Status | ||||
---|---|---|---|---|
|
...
제공하는 이벤트 버튼 외에 추가로 버튼을 생성하여 사용할 수 있다. 버튼 추가는 . Extra Buttons{ON}으로 설정하면 하단에 Extra Button Table 영역이 출력된다. 아이콘을 클릭하고 컴포넌트를 선택하여 진행한다. 버튼 셋팅 옵션은 https://ionsdp.atlassian.net/wiki/spaces/~438538633/pages/1555333928/Set+Button#Setting-Screen을 참고 하자.Extra Buttons{ON}일 경우, 테이블 마지막 필드에 원하는 버튼 컴포넌트를 추가할 수 있다.
Extra Buttons을 사용하면, 테이블 마지막 열에 각 Row에 적용 가능한 Action Display 필드가 신규 생성된다. 버튼 또는 드롭다운 2가지 Action Display Type 옵션을 설정하여 Extra Buttons을 나열할 Buttons의 필드 내 출력 형태를 결정 할 수 있다.
Action Display Type : 디스플레이 필드 타입 선택(
Button
,Dropdown
)Action Display Button Align
: 버튼 타입의 액션 디스플레이 정렬 옵션(Status colour Yellow title new Vertical
,Horizontal
)Action Display Button Type
: 버튼 타입의 액션 디스플레이 타입 옵션(Status colour Yellow title new Hamburger
,Default
)
...
테이블 값을 바로 편집할 수 있는 기능으로, 에디팅 아이콘이 출력되는 필드 아이콘 필드가 테이블 첫번째 열에 추가된다. 에디팅 아이콘을 클릭하면, 해당 Row에 Data를 바로 편집할 수 있다.
Status | ||||
---|---|---|---|---|
|
...
테이블 헤더에 있는 필드를 그룹핑하여 보여주는 기능이다. 필드 뎁스 목록에서 아이콘을 클릭하면 그룹핑을 설정옵션이 출력된다. List Field Instance Slot 테이블 셋팅에서 필드별 개별 셋팅하여 적용할 수도 그룹핑 레벨 목록에서 원하는 레벨을 선택하고 그룹명과 그룹핑 할 필드를 선택한다. 아이콘을 클릭하여 그룹핑 레벨을 추가 할 수 있다.
Grouping Level : 그룹핑 할 뎁스를 레벨을 셀렉트 박스로 박스에서 선택
Group Label : 그룹명 입력 필드
Select Grouping Fields : 동일한 Level 내에서 그룹핑 할 필드 선택
...
Using “List List Field Instance Slot” Slot에서 필드 별 그룹핑 진행
Status
colour Green title Tip List Field Instance Slot 테이블에 있는 설정 에서 을 이용해 필드 1개씩 그룹핑을 개별 셋팅하는 방법도 있다.
...
Status | ||||
---|---|---|---|---|
|
...
6. Show MoreLink
테이블 상단에 [more] 을 추가하여 링크로 더 많은 정보를 사용자에게 전달 할 수 있다.
...
3. Hide Title
Status | ||||
---|---|---|---|---|
|
테이블명을 노출/비노출 설정
Status | ||||
---|---|---|---|---|
|
4. Bordered
테이블 보더 노출/비노출 설정
5. Fixed Header
테이블 헤더를 고정하는 기능으로, 테이블을 상하로 스크롤하여도 테이블 헤더가 고정되어 보인다.
Header Height : 테이블 헤더
...
높이값 입력 필드
6. Fixed Columns
Status | ||||
---|---|---|---|---|
|
테이블의 특정 Col을 고정하는 기능으로 고정 Col 필드 목록이 출력된다, 테이블을 좌후로 스크롤하여도 선택한 Col이 고정되어 보인다.
Enable Select Fixed Columns Fields
: Fixed Columns을 진행 할 필드 설정 필드를 선택Status colour Yellow title new
7. Custom Title Style
테이블 타이블 스타일을 설정하는 기능으로 Title Style Set이 출력된다.
...
스타일 셋팅은 3가지 방법 진행 할 수 있다. Title Style, Card Style 모두 동일한 스타일 셋팅을 사용하다.
Simple CSS
Status | ||||
---|---|---|---|---|
|
각 옵션에 값을 입력하거나 선택하여 셋팅하는 방법이다.
...
Code CSS
Status | ||||
---|---|---|---|---|
|
Class Name을 입력하고, 직접 CSS를 작성하는 방법이다.
...
Common CSS
Status | ||||
---|---|---|---|---|
|
자주 쓰이는 CSS 목록에서 원하는 스타일을 선택하는 방법이다.
...
...
To be deleted?
Status | ||||
---|---|---|---|---|
|
...