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 70 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 https://ionsdp.atlassian.net/browse/ICE4-2027

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 NEW : 페이지네이션 정렬 선택(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 NEW

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

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

2. Table Header Search NEW

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

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

3. Search Form Filter NAME/OPT CHANGE

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

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

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

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

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

NEED CHECK https://ionsdp.atlassian.net/browse/ICE4-2050


Function Option

1. Drag Sort NAME CHANGE

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

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

TIP Drag handler Field

{ON}설정 시 테이블 각각의 Row에 드래그 핸들러 아이콘이 출력되어 사용자가 드래그 정렬 기능을 사용 할 수 있음을 좀 더 쉽게 인지할 수 있도록 한다.

NEED CHECK 기능 추가 : Drag sorting with handler

2. Editable

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

NEED CHECK https://ionsdp.atlassian.net/browse/ICE4-2049

3. Summary

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

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

4. Field Grouping NEW TBD

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

  • Grouping Level : 그룹핑 할 뎁스를 셀렉트 박스로 선택

    • Group Label : 그룹명 입력 필드

    • Select Grouping Fields : 동일한 Level 내에서 그룹핑 할 필드 선택

NEED CHECK

TIP Using “List Field Instance Slot”

List Field Instance Slot 테이블에 있는 설정(blue star) 에서 필드 1개씩 그룹핑을 개별 셋팅하는 방법도 있다.

5. Authorization by Field NAME CHANGE

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

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

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

7. Action Display NEW TBD

테이블 마지막 필드에 각 Row에 적용 가능한 액션 디스플레이 필드를 생성한다. 아이콘, 버튼, 드롭다운 3가지 타입 중 하나를 선택하고, 원하는 Action 목록을 생성하고 컴포넌트를 연결한다.

  • Action Display Type : 디스플레이 필드 타입 선택(Icon, Button, Dropdown)

    • Action Display Button Align : 버튼 타입의 액션 디스플레이 정렬 옵션(Vertical, Horizontal)

    • Action Display Icon Type : 아이콘 타입의 액션 디스플레이 노출 타입 옵션(Hamburger, Unfolded)

  • Action Display List : 디스플레이 필드에 사용할 액션 목록을 생성하거나 선택

NEED CHECK ANT 텍스트 버튼 스타일의 액션 디스플레이

NEED CHECK


Style Option

1. Size

테이블 사이즈 선택(Small, Default, Large)

2. Show Empty Data First

노리스트 테이블을 출력

3. Hide Title CHANGE "SHOW TITLE"

테이블명을 노출/비노출 설정

4. Bordered

테이블 보더 노출/비노출 설정

5. Fixed Header

테이블 헤더 높이값을 직접 입력하여 고정

6. Fixed Columns NEED CHECK

테이블의 특정 Col을 고정하는 기능으로 고정 Col 필드 목록이 출력된다.

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

7. Custom Title Style

테이블 타이블 스타일을 설정하는 기능으로 Title Style Set이 출력된다.

8. Custom Card Style

리스트 형태의 테이블을 카드 스타일로 변경 할 수 있다. Card Style Set으로 설정한다.


Style Set

스타일 셋팅은 3가지 방법 진행 할 수 있다.

Simple CSS

각 옵션에 값을 입력하거나 선택하여 셋팅하는 방법이다.

Code CSS

Class Name을 입력하고, 직접 CSS를 작성하는 방법이다.

Common CSS

자주 쓰이는 CSS 목록에서 원하는 스타일을 선택하는 방법이다.


To be deleted? NEED CHECK

  • No labels