Basic Set
기본 테이블은 Title
, Table
, Pagination
, Event Buttons
4가지 엘리먼트로 구성되어 있다.
1. Table Data
Target Node Type : 타겟 노드 타입
Enable List Fields : 테이블 필드 Value를 선택하여 테이블 생성 > List Field Instance Slot 테이블 셋팅
Data Sync : 연관 데이터 자동 설정
Use API : API 사용 여부
URL
Parameters
2. Table Title
Show Title : 테이블명 사용 여부를 설정하는 토글 버튼
Title : 테이블명 입력 인풋 박스 MEMO Show Title{ON} & Title 미입력 : 노드타입명 출력
Title Style : 타이틀 스타일 ON > 스타일 셋팅 박스 출력( https://ionsdp.atlassian.net/wiki/spaces/~438538633/pages/1555333928/Set+Button#Button-Style )
3. Pagination
Show Pagination
Pagination Position = {Top, Bottom, Both} NEED CHECK top 적용 안됨, Default값 필요(미설정 > bottom)
Pagination Align = {Left, Center, Right} NEW 페이지네이션에도 정렬 기능 필요(Default = right)
Show Total Count
4. Event Buttons
Enable List Events : 기본 5가지 버튼 중 선택하여 추가 > List Button Instance Slot 테이블 셋팅
Show Event Buttons
Event Buttons Position = {Top, Bottom, Both}
Event Buttons Align = {Left, Center, Right}
Use Extra Buttons : 추가 버튼 생성
Extra Button Table
사용ON > Add Form : Component, Column Label, Label, Data Sync
컴포넌트 선택 > 버튼 Option 셋팅 박스 출력 https://ionsdp.atlassian.net/wiki/spaces/~438538633/pages/1555333928/Set+Button#Setting-Screen
ASIS Pagination과 Event Buttons 2가지 모두 ON일 경우, 서로 다른 라인에 배치됨
TBD Pagination과 Event Buttons 2가지 모두 ON일 경우, 동일 라인에 배치하는 신규 옵션 추가
NEW Same line align 옵션
[Pagination] > [Left, Center, Right] : 3가지 옵션 모두 선택 가능
[Event Buttons] > [
Left, Center, Right] : Pagination에서 선택한 옵션 선택 불가
EX 백오피스 예시 화면
동일 라인 Align사용 | 다른 라인 Align사용 |
---|---|
Function Set
기본 테이블에 Search
, Draggable
, Editable
, Grouping
, Summary
5가지 기능을 적용할 수 있다.
1. 검색
Show Search{ON/OFF}
NEW Use SearchBar{ON/OFF}
Enable Search Fields : 검색바에 사용할 조건 옵션 선택 > Search Field Instance Slot 테이블 셋팅
NEW Use Filter/Sorter{ON/OFF}
TOBE Search Type = {Filter/Sorter, Form Filter, Both}
(Form Filter)사용 > Enable Search Form Fields > Search Form Field Instance Slot 테이블 셋팅
(Form Filter)사용 > Search Timing = {Realtime Search, Button Search}
(Filter/Sorter)사용 > Show Sorter
(Filter/Sorter)사용 > Show Filter
Use Search Cache : 필드 필터와 폼검색 캐시 저장 사용
검색타입{Form Filter} 선택 시 화면
검색타입{Filter/Sorter} 선택 시 화면
Connect SearchForm : 검색 이력 저장, 동일한 검색 매개 변수가 들어 올 경우 검색
NEED CHECK Connect SearchForm{ON}설정 시
Search Table MEMO
NEED CHECK 검색바만 사용하고 싶은 경우 설정 없음
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 : 필터 설정 후 [필터적용] 버튼을 클릭할 경우 테이블에 결과 출력
2. 드래그 정렬
Draggable{ON/OFF}
NEW Use Drag icon{ON/OFF}
NEED CHECK 드래그 테이블은 Search, Pagination 기능과 함께 사용 할 수 없는지 확인 필요
ANT DESIGN 사용자가 드래그 사용 가능 여부를 쉽게 알 수 있도록 icon이 추가된 2번 타입 추가 제안
1번 Drag sorting (현재) | NEW 2번 Drag sorting with handler |
---|---|
또는 List Order Edit Function 옵션으로 다중칸/한칸씩 이동하는 기능 선택할 수 있도록 기능 추가
List Order Edit Function | |
---|---|
A타입 : 드래그로 다중칸 이동 가능 | B타입 : 한칸씩만 이동 가능 |
3. 에디팅
Editable{ON/OFF}
NEW Editable Type = {Cells, Rows}
ANT DESIGN 2가지 에디팅 기능 ( NEEDCHECK 현재 에디팅 기능 사용 불가능 )
4. 그룹핑
ASIS List Field Instance Slot 테이블 셋팅에서 필드 1개씩 개별 셋팅
TOBE 그룹핑 여러개를 한번에 확인하며 진행할 수 있는 방법 필요
NEW Grouping{ON/OFF}
NEW Group Label : 필드 그룹명 텍스트 입력
NEW Select Fields : 그룹핑 할 필드 선택(다중선택)
5. 써머리
Show Summary
Enable Summary Fields : Sum 진행 할 테이블 필드 선택
UI Set : Table Options
1. Size
2. Table Style
Bordered, Header, Colums
3. Table Style
4. Radio, Checkbox
NEED CHECK 라디오, 체크박스 기능을 선택형으로 변경 필요 > 라디오버튼
5. Custom ?
0. 기능 확인 불가 NEED CHECK
1. Info Icon
2. Action Display Type = {Button ,Droupdown}
Slot Set
List Field Instance Slot : 1-2. 테이블 필드, 데이터
List Button Instance Slot : 1-4. 이벤트 버튼
Search Field Instance Slot : 2-1. 검색과 필터 > 검색바
Search Form Field Instance Slot : 2-1. 검색과 필터 > 필터/쏠팅