...

Setup

Create New

...

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

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

...

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

...

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

...

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

...

...

Style Option

1. Size

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

...

6. Fixed Columns

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

...

...

7. Custom Title Style

테이블 타이블 스타일을 설정하는 기능으로 Title Style Set이 출력된다.타이틀 스타일을 설정하는 기능이다. (참고: https://ionsdp.atlassian.net/wiki/spaces/ICE4P/pages/1555300766/Table+List#Style-Set-Detail)

8. Custom Card Style

리스트 형태의 테이블을 카드 스타일로 변경 할 수 있다. Card Style Set으로 설정한다.. (참고: https://ionsdp.atlassian.net/wiki/spaces/ICE4P/pages/1555300766/Table+List#Style-Set-Detail)

...

Function Option

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

...

1. Drag Sort (ASIS: Draggable)

...

테이블 값을 바로 편집할 수 있는 기능으로, 에디팅 아이콘 Action Field가 테이블 첫번째 열에 추가된다. 에디팅 아이콘을 클릭하면, 해당 Row에 Data를 바로 편집할 수 있다.

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

...

3. Summary

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

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

...

4. Grouping Table Head

Status
colour Yellow title new

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

...

Status
colour Green title 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개씩 그룹핑을 개별 셋팅하는 방법도 있다.

...

.

...

만약 필드 2번과 3번을 위와 같이 그룹핑 하고 싶다면, 필드 2번 설정을 클릭 > Grouping{ON}, Group Label A입력 한 뒤, 필드 3번 설정에 들어가 동일하게 Grouping{ON}, Group Label A를 동일하게 입력하고 저장한다.

...

5. Fixed Column Fields

Status
colour Yellow title new

...

6. Show MoreLink

테이블 상단에 [more] 버튼을 추가하여 링크로 더 많은 정보를 사용자에게 전달 할 수 있다.

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

7. Authorization by Field (ASIS: Personalized Columns)

8. Actions Display Type

액션 필드의 디스플레이 타입을 선택 할 수 있다.(Button, Dropdown)

...

Editable 옵션을 사용하면 Action Field가 신규로 생성되고, 편집 버튼이 아이콘 형태로 기본 출력된다.

...

Events Option

1. Event Buttons

...

• Enable List Event Buttons : 이벤트 버튼 목록(Create, Read, Update, Delete, List)

• Data Select Field

  Status
  colour Red title tobe

  : 테이블 데이터 선택하는 필드 사용(No Use, Radio, Checkbox)

• Event Buttons Position : 버튼 위치 선택(Top, Bottom, Both)

• Top/Bottom Event Buttons Align : 버튼 정렬 선택(Left, Center, Right)

...

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

...

Search Option

검색 Tab의 상세 옵션 내용은 아래와 같다.

...

1. Search Bar

Status
colour Yellow title new

...

테이블 헤더에 Filter/Sorter Search 기능 추가할 수 있다.

• Table Header Search Type

  Status
  colour Yellow title new

  : 테이블 헤더 검색 옵션 선택(Sorter, Filter, Both)

3. Search Form Filter

Status
colour Red title

...

TOBE

검색폼 필드 목록이 출력된다. 값을 선택하면 테이블 상단에 검색폼이 나열된다.

• Enable Search Form Fields : 검색폼으로 생성 할 필드 설정

• Search Timing

  Status
  colour Yellow title new

  : 검색 결과 출력 타이밍 (Real time, Click Botton)

• Connect Search Form : 검색 이력을 저장하여 동일한 검색 매개 변수의 경우 검색 미진행

• Use Search Cache : 검색 이력 캐시 저장

...

...

Style Set Detail

스타일 셋팅은 3가지 방법 진행 할 수 있다. Title Style, Card Style 모두 동일한 스타일 셋팅을 사용하다.

...