UI 유형
ICE4에서 만들 수 있는 테이블 리스트는 총 6가지 유형으로 구분된다.
1. Basic Table
기본적인 테이블 리스트는 Title, Table List, Pagination, Event Buttons로 구성한다.
2. Search Table
검색 테이블은 기본적으로 Search Bar를 제공한다. NEED CHECK 검색바만 사용하고 싶은 경우 설정 없음
Filter와 Sorter 기능은 2가지 타입으로 선택하여 사용 가능하다.
[1] Filter and Sorter : 테이블 Column Header에서 바로 Sort/Filter 기능 사용
ASIS 옵션명 변경 필요
NEED CHECK
Show Search{ON/OFF}
NEW Use Search Bar{ON/OFF}
{ON}일 경우에만 Enable Search Fields 목록 출력
NEW Use Filter/Sorter{ON/OFF}
{ON}일 경우에만 Search Type 옵션 출력
{Form Filter}일 경우에만 Enable Search Form Fields 목록 출력
NEW Search Timing = {Realtime Search, Button Search}
TOBE [Search Type] ( ASIS *Search Type = {Filter, Form} )
- Filter/Sorter: 테이블 내의 Column Header에서 바로 필터/쏠팅 사용 가능
- Form Filter: 테이블 상단에 Form(?) 형태로 필터 사용
NEW [Search Timing] ( ASIS Enable Search Form Button )
- Realtime Search : 필터 선택과 동시에 실시간으로 테이블에 결과 출력
- Button Search : 필터 설정 후 [필터적용] 버튼을 클릭할 경우 테이블에 결과 출력
3. Draggable Table
드래그 정렬 기능을 제공하는 테이블이다. Drag&Drop으로 Row데이터 위치를 변경하면, OrderNo 또한 함께 변경된다. 단, 드래그 테이블은 Search, Pagination 기능과 함께 사용 할 수 없다.
TBD 사용자에게 드래그 기능 사용 가능함을 알리는 힌트 아이콘 필요
List Order Edit Function | |
|---|---|
A타입 : 드래그로 다중칸 이동 가능 | B타입 : 한칸씩만 이동 가능 |
  |  |
ANT https://ant.design/components/table/#components-table-demo-drag-sorting-handler
4. Editable Form
테이블 데이터를 바로 수정할 수 있도록 에디트 기능이 추가된 테이블이다.
5. Grouping Form
테이블 필드를 그룹핑 한 테이블이다.
6. Summary Form
테이블 하단에 필드별 합계 정보를 출력해주는 테이블이다.
셋팅 옵션
BackOffice Builder의 TableList > Setting > [Option] 설정을 통해 테이블 리스트 유형과 스타일을 변경한다.
Create
기본 테이블 리스트를 생성한 뒤, 옵션 설정으로 원하는 유형을 만들 수 있다.
1. Table : NodeType
Target NodeType을 선택하면, 해당 노드에 셋팅되어 있는 Enable List Fields 목록이 출력된다. 테이블에 넣고자 하는 Value를 선택하여 테이블 리스트를 생성한다.
2. Buttons
Enable List Events 목록에서 테이블 내에서 필요한 기본 버튼을 선택하여 생성한다.
Create : 테이블 필드에 데이터를 등록
Read : 테이블에 등록 된 데이터를 상세 조회
Update : 변경 내용을 저장하고 업데이트
Delete : 테이블에 등록 된 데이터를 삭제
List : 상위 목록 페이지로 돌아가는 기능
3. Extra Buttons
NEED CHECK 테이블 내에 사용 할 버튼이 필요하다면, Extra Buttons을 ON으로 설정한다.
①번 추가하기 아이콘을 클릭하면, 하단에 버튼 추가 영역이 출력된다.
②번 버튼 컴포넌트를 선택하면, 하단에 버튼 옵션 설정 영역이 출력된다.
Column Label : 테이블 열에 필드명
Label : 버튼명 텍스트
Data Sync : 연관 데이터 설정 여부를 토글버튼으로 선택
③번 버튼 옵션 설정을 진행한 뒤, ④번 저장 버튼을 클릭한다. (버튼 목록/설정 참고 : Event Component)
⑤번과 같이 Extra Button이 신규 생성되어 목록에 추가 되었다.
3. Search
검색 기능을 설정하고 싶다면, Show Search를 ON으로 설정한다. ①~③번 옵션이 아래와 같이 출력된다.
Search Type : 테이블 필드 필터형과 검색 폼, 2가지 타입 선택 가능
Search Cache : 검색 이력을 Cache에 저장하는 기능
Search Fields :
Search Bar에 들어갈 필터 옵션 설정
검색 타입을 Form으로 선택할 경우, 아래와 같이 ④~⑥번 옵션이 추가로 나타난다.
Search Form Fields : 폼 형태로 출력 할 필드를 선택
Realtime Search : 검색폼 설정과 동시에 테이블에 검색 결과가 실시간으로 출력
Search Form Button : 검색폼 설정 이후 [검색] 버튼을 통해서 검색 결과를 출력 삭제예정?
4. Grouping
List Field Instance Slot 영역에서 테이블 필드별로 그룹핑 기능을 설정 할 수 있다.
만약, 아래 그림과 같이 가입일, 탈퇴일, 휴면전환일 3개의 필드를 그룹핑 하고자 할 경우, 필드 각각의 설정(
)을 클릭하여 총 3번 그룹핑 설정을 진행해야 한다.
①번 가입일 설정을 클릭하고, 아래 상세 영역에서 Grouping 옵션을 ON으로 설정한다.
가입일, 탈퇴일, 휴면전환일 3개의 필드를 각각 Grouping{ON}하고 “Date Information“이라는 동일 Group Label로 설정하면 다음과 같이 그룹핑 테이블이 만들어 진다.
5. Summary
Options
1. Title
Show Title 토글버튼을 ON으로 설정하면, Title 입력 필드가 나타나 테이블명을 작성 할 수 있다.
2. Size
Setting | Result |
3. Border
Setting | Result |
Event Button
Sort
Search: Bar, Form
Pagination
Filter: Select, Checkbox
Table: Title, Show Summary, Click Event, Table Button, Toggle, Mouse Over Menu
Icon: Edit, Delete, Status, setting, upload, download, media, etc
summary graph (up/down)
Label
Tag
Link
Custom View
테이블 액션 참고: https://blog.naver.com/clay1987/221402213506