Versions Compared

Version Old Version 91 New Version 92
Changes made by

yangtop

DXP Angela (Unlicensed)

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Table of Contents

https://docs.google.com/spreadsheets/d/1GR0ElwGus8dPp79svWeYp6PpPWBJxpdREgMMNHA8RHM/edit#gid=0

...

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 사용여부를 설정 할 수 있다.

...

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

...

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

...

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

...

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

...

...

Style Option

1. Size

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

2. Show Empty Data First

노리스트 No-Data 리스트 테이블을 출력 한다.

3. Hide Title

테이블명을 노출/비노출 비노출로 설정 할 수 있다.

4. Bordered

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

5. Fixed Header

테이블 헤더를 고정하는 기능으로, 테이블을 상하로 스크롤하여도 테이블 헤더가 고정되어 보인다.

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

Fixed Table Wid

6. Fixed Columns

컬럼 각각의 사이즈 고정

7. Fixed Column Header

테이블의 특정 Col을 고정하는 기능으로, 테이블을 좌후로 스크롤하여도 선택한 Col이 고정되어 보인다.

  • Select Fixed Columns

    Status
    colourYellow
    titlenew

Status
colourRed
titleneed check
고정시킬 필드 선택 or 필드 1번부터 몇번째까지 고정시킬지 설정하는 기능 필요!

사이즈를 고정시켜 보여준다.

Info

Fixed Columns{ON}

...

Info

Fixed Columns{OFF}

...

7. Custom Title Style

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

...

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

...

Function Option

1. Drag Sort

Status
colourRed
titlename change

(ASIS: Draggable)

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

  • Use Drag handler Field

    Status
    colourYellow
    titlenew
    : 드래그 핸들러 아이콘이 출력되는 아이콘 필드 사용 여부 추가 설정

Status
colourGreen
titleTip
Drag handler Field{ON}

테이블 각각의 Row에 첫번째 열에 드래그 핸들러 아이콘이 출력되어 아이콘을 노출하여 사용자가 드래그 정렬 기능을 사용 할 수 있음을 좀 더 쉽게 인지할 수 있도록 인지하도록 한다.

Status
colourPurple
titleant
Drag sorting with handler

Info

Drag Sort{ON}, Use Drag handler Field{ON}

...

2. Editable

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

...

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

4.

...

Grouping Table Head
Status
colourYellow
titlenew
Status
colourRed
titleTBD

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

  • Enable Table List Fields Grouping Grouping Level : 그룹핑을 진행 할 라벨 선택

  • Grouping Label : 그룹명 지정

  • Select Grouping Fields : 그룹핑 할 필드 선택(시작 필드와 종료 필드 선택)

Status
colour

...

Green
titletips

...

Select Grouping Fields

...

Enable Table List Fields 에서 선택한 Value 목록이 출력되며,

...

Status
colourRed
titleneed check

Status
colourGreen
titleTip
그룹핑은 이웃 필드끼리만 가능하다.

(ex. Field 01, Field 03, Field 05, 3가지 필드를 선택할 경우, Field 01부터 Field05까지 5개 필드가 자동 선택)

...

(lightbulb) List Field Instance Slot에서 필드 별 그룹핑 진행

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

...

5.

...

Fixed Column Fields
Status
colour

...

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

  • 하위 옵션

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

...

Yellow
title

...

new

테이블의 특정 필드의 Col을 고정하는 기능으로, 테이블을 좌후로 스크롤하여도 선택한 필드 열이 고정되어 보인다.

  • Fixed Column Position : 고정시킬 컬럼의 위치 선택(Left, Right, Both)

  • Left/Right Fixed Columns Num : 고정시킬 컬럼의 개수 선택

Option Value

Sub Option

Fixed Column Position Left

Left Fixed Columns Num

Fixed Column Position Right

Right Fixed Columns Num

Fixed Column Position Both

Left Fixed Columns Num, Right Fixed Columns Num

Info

Fixed Column Fields{ON}, Fixed Columns Location{Left}, Fixed Left Columns Num(2)

Image Added

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

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

7. Authorization by Field (ASIS: Personalized Columns)

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

8. Actions Display Type

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

Status
colourGreen
titletips
Editable & Actions Display Type

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

...

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)

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

...

Option Value

...

colourRed
titleneed check

...

[Both] > [Top Align]{(Left, Center, Right)}

...

Sub Option

Event Buttons Position Top

Top Event Buttons Align

Event Buttons Position Bottom

Bottom Event Buttons Align

Event Buttons Position Both

Top Event Buttons Align, Bottom Event Buttons Align

Status
colourGreen
titleTip
Data Select Field

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

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

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

...

2. Pagination

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

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

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

  • Top/Bottom Pagination Align

    Status
    colourYellow
    titlenew
    : 페이지네이션 정렬 선택(Left, Center, Right)

...

Option Value

...

colourRed
titleNEED CHECK

...

Status
colourRed
titleneed check
Pagination Default : Position{Bottom}, Align{left}

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

[Both] > [Top Align]{(Left, Center, Right)}

[Both] > [Bottom Align]{(Left, Center, Right)}

3. Use Same Line
Status
colourYellow
titlenew

...

Sub Option

Pagination Position Top

Top Pagination Align

Pagination Position Bottom

Bottom Pagination Align

Pagination Position Both

Top Pagination Align, Bottom Pagination Align

3. List Default PageSize

한 페이지에서 보여줄 테이블 목록의 Row 개수를 입력하여 Default로 지정한다.

Status
colourGreen
titleTip
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}”

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

Status
colourGreen
titleTip
Action Display Type{Button}

버튼 옵션 설정을 통해 Basic Button, Text Button, Icon Button, Text Button with Icon 등을 만들 수 있다.

버튼 옵션에 관한 가이드는 Event Component을 참고하자.

4. Use Extra Buttons
Status
colourRed
titlewith action display Option

tip
List Default PageSize & Pagination

Default PageSize 수치를 기준으로 페이징 처리가 진행된다.

4. List Show PageSize Changer

테이블 목록의 Row 개수를 실시간으로 변경하여 보는 옵션을 추가할 수 있다.

  • List PageSize Changer : 테이블 목록 Row 개수 변경 옵션 다중 선택(10, 20, 50, 100)

Image AddedImage Added

5. Use Extra Buttons

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

Status
colourRed
titleneed check
Action Display Type{Button}

...

Status
colourRed
titleneed check
Action Display Type{Dropdown}

...

...

Search Option

1. Search Bar
Status
colourYellow
titlenew

...

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

  • Search Timing

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

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

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

...

...

...

Style Set Detail

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

...

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

...

To be deleted?
Status
colourRed
titleneed check

https://ionsdp.atlassian.net/browse/ICE4-2040

1. List Scroll (X)

2. List Scroll Height (X)

3. List Search Form Field Size (X)

4. List Search Form Field Gutter (X)

5. List Default PageSize

6. List Show PageSize Changer

7. Show info Icon

아이콘 필드 테이블 최상단에 출력

  • 신규 등록된 목록 [new] 아이콘 처리

8. Custom

...

Image Removed