Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 64 Next »

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

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 : 테이블 옵션을 Events, Search, function, Style 4가지 탭으로 구분하여 제공

  • Table Click Set Area : 테이블을 Click, Double Click 할 경우 발생하는 이벤트를 설정하는 영역

  • Table Slot Area : 테이블 필드, 이벤트 버튼, 검색바 필드, 검색폼 필드의 설정 슬롯 영역

Option Detail

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

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

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

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

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

Events Option

1. Event Buttons

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

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

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

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

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

NEED CHECK Buttons Default : Position{Bottom}, Align{right}

TIP Data Select Field

테이블 첫번째 Col에 데이터 선택 필드가 생성되며, 선택 타입을 2가지로 선택 가능하다.

- Radio : 라디오 버튼 타입으로 데이터 선택 필드 생성, 단일 선택만 허용할 경우 사용

- Checkbox : 체크박스 타입으로 데이터 선택 필드 생성, 다중 선택을 허용할 경우 사용

2. Pagination

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

  • Pagination Total Count : 페이징 총합 출력

  • Pagination Position : 페이지네이션 위치 선택(Top, Bottom, Both)

  • Pagination Align : 페이지네이션 정렬 선택(Left, Center, Right)

NEED CHECK Position{top} 확인불가 > https://ionsdp.atlassian.net/browse/ICE4-2047

NEED CHECK Pagination Default : Position{Bottom}, Align{left}

NEED CHECK Pagination Align 현재 비노출, 노출로 변경하고 [Use Same Line] 옵션 추가하여 사용자 자유도 UP

3. Use Same Line NEW

버튼과 페이지네이션 사용이 모두 {ON}일 경우, 버튼과 페이지네이션을 같은 라인에 배치하는 기능이다.

TIP Use Same Line

Same Line을 {ON}으로 설정하면 페이지네이션의 위치/정렬 옵션이 비노출되고, 버튼 위치/정렬 설정에 따라 페이지네이션의 위치가 자동 설정된다. 버튼 정렬은 {Left, Right}만 선택 가능하다.

- Event Buttons Position{Top} → Auto Set “Pagination Position{Top}”

- Event Buttons Align{Right} → Auto Set “Pagination Align{Left}”

4. Use Extra Buttons

제공하는 이벤트 버튼 외에 추가로 버튼을 생성하여 사용할 수 있다. 추가하기 (plus) 아이콘을 클릭하고 버튼 컴포넌트를 선택하여 셋팅한다. 버튼 셋팅 옵션은 https://ionsdp.atlassian.net/wiki/spaces/~438538633/pages/1555333928/Set+Button#Setting-Screen을 참고 하자.

Search Option

1. Search Bar

검색바 필드 목록이 출력된다. 값을 선택하면 테이블 상단에 검색바가 추가된다.

  • Enable Search Bar Fields : 검색바의 검색 필터 필드 설정

2. Table Header Search

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

  • Table Header Search Type : 테이블 헤더 검색 옵션 선택(Sorter, Filter, Both)

3. Search Form Filter

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

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

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

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

  • Use Search Cache : 캐시 저장 사용 가능

Function Option

1. Drag Sort NAME CHANGE

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

  • Drag handler Field NEW : 드래그 핸들러 아이콘이 출력되는 필드 사용

TIP Drag handler Field

드래그 핸들러 아이콘으로, 사용자는 드래그 정렬 기능을 사용 할 수 있음을 좀 더 쉽게 인지할 수 있다.

NEED CHECK 기능 추가 : Drag sorting with handler

2. Editable

테이블 값을 바로 편집할 수 있는 기능으로, 에디팅 아이콘이 출력되는 필드 첫번째 열에 추가된다.

3. Summary

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

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

4. Field Grouping NEW

테이블 헤더에 있는 필드를 그룹핑하여 보여주는 기능이다. (plus) 추가하기 아이콘을 클릭하면 그룹핑을 설정옵션이 출력된다. List Field Instance Slot 테이블 셋팅에서 필드별 개별 셋팅하여 적용할 수도 있다.

  • Group Label : 그룹명 입력 필드

  • Select Grouping Fields : 동일한 Depth 내에서 선택 가능한 필드 목록 출력

ASIS List Field Instance Slot 테이블 셋팅에서 필드 1개씩 개별 셋팅

TOBE 옵션 내에서 바로 그룹핑 가능하도록 기능 추가 필요!

<정리중>

5. Authorization by Field NAME CHANGE

필드 개별로 계정 접근 권한을 설정하는 기능이다.

NEED CHECK 설정 방법 확인 필요, 현재 토글{ON}해도 하위 옵션 출력 없음

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

Style Option

1. Size

테이블 사이즈를 small, Default, Large로 설정할 수 있다.

2. Show Empty Data First

노리스트 테이블을 출력하는 기능이다.

3. Hide Title CHANGE "SHOW TITLE"

테이블명을 노출/비노출을 설정한다.

4. Bordered

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

5. Fixed Header

테이블 헤더 높이값을 직접 입력하여 고정하는 기능이다.

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

6. Fixed Columns NEED CHECK

테이블 열을 고정시킬 수 있다. 많은 필드를 사용하는 테이블에서 특정 필드 열만 고정시킬 경우 사용한다.

  • Enable Fixed Columns Fields NEW : Fixed Columns을 진행 할 필드 설정

7. Custom Title Style

8. Custom Card Style

NEED CHECK

Action Display Type = {Icon, Button ,Droupdown}

  • No labels