tfsm-formset 예제


Struct
"Struct":[
1 item
0:{
4 items
"id":
string"BasicInfo"
"name":
string"CodeGen"
"format":
string"Titletext"
"Items":[
1 item
0:{
4 items
"id":
string"ProductNum"
"name":
string"상품번호"
"format":
string"CodeGen"
"prefix":
string"Code-"
}
]
}
]

기본
CodeGen
상품번호
Code-1750232633

"Output":{}
0 items

수정
CodeGen
상품번호
12345

"Input":{
1 item
"ProductNum":
string"12345"
}
"Output":{}
0 items

Struct
"Struct":[
1 item
0:{
4 items
"id":
string"BasicInfo"
"name":
string"Text"
"format":
string"Titletext"
"Items":[
1 item
0:{
4 items
"id":
string"ProductName"
"name":
string"상품명"
"format":
string"Text"
"props":{
1 item
"readOnly":
booltrue
}
}
]
}
]

기본
Text
상품명

"Output":{}
0 items

수정
Text
상품명

"Input":{
1 item
"ProductName":
string"안녕하세요"
}
"Output":{}
0 items

Struct
"Struct":[
1 item
0:{
4 items
"id":
string"BasicInfo"
"name":
string"Price"
"format":
string"Titletext"
"Items":[
1 item
0:{
5 items
"id":
string"Price"
"name":
string"상품가격"
"format":
string"Price"
"suffix":
string"원"
"Separator":
booltrue
}
]
}
]

기본
Price
상품가격

"Output":{}
0 items

수정
Price
상품가격

"Input":{
1 item
"Price":
string"1000"
}
"Output":{}
0 items

Struct
"Struct":[
1 item
0:{
4 items
"id":
string"BasicInfo"
"name":
string"Hierarchy"
"format":
string"Titletext"
"Items":[
1 item
0:{
4 items
"id":
string"Category"
"name":
string"상품분류"
"format":
string"Hierarchy"
"HierarchyData":{
2 items
"name":[
3 items
0
:
string"대분류"
1
:
string"중분류"
2
:
string"소분류"
]
"viewField":
string"Name"
}
}
]
}
]

기본
Hierarchy
상품분류

"Output":{}
0 items

수정
Hierarchy
상품분류
대분류 :
1
중분류 :
2
소분류 :
33

"Input":{
1 item
"Category":[
3 items
0:{
5 items
"Code":
string"1"
"Name":
string"1"
"lev":
int0
"pid":
int0
"key":
string"sKItoqKJnAbTnGVP3mfM"
}
1:{
5 items
"Code":
string"2"
"pid":
string"sKItoqKJnAbTnGVP3mfM"
"lev":
int1
"Name":
string"2"
"key":
string"bvA6fuaFER7IQvpoCOSt"
}
2:{
5 items
"pid":
string"bvA6fuaFER7IQvpoCOSt"
"Name":
string"33"
"lev":
int2
"Code":
string"33"
"key":
string"0HANo5pGWvHBLuonzePR"
}
]
}
"Output":{}
0 items

Struct
"Struct":[
1 item
0:{
4 items
"id":
string"BasicInfo"
"name":
string"Hierarchy"
"format":
string"Titletext"
"Items":[
1 item
0:{
4 items
"id":
string"Category"
"name":
string"상품분류"
"format":
string"Hierarchy"
"HierarchyData":{
3 items
"name":[
3 items
0
:
string"대분류"
1
:
string"중분류"
2
:
string"소분류"
]
"viewField":
string"Name"
"LastMulti":
booltrue
}
}
]
}
]

기본
Hierarchy
상품분류

"Output":{}
0 items

수정
Hierarchy
상품분류
대분류 :
1
중분류 :
2
소분류 :
33
:
33

"Input":{
1 item
"Category":[
4 items
0:{
5 items
"Code":
string"1"
"Name":
string"1"
"lev":
int0
"pid":
int0
"key":
string"sKItoqKJnAbTnGVP3mfM"
}
1:{
5 items
"Code":
string"2"
"pid":
string"sKItoqKJnAbTnGVP3mfM"
"lev":
int1
"Name":
string"2"
"key":
string"bvA6fuaFER7IQvpoCOSt"
}
2:{
5 items
"pid":
string"bvA6fuaFER7IQvpoCOSt"
"Name":
string"33"
"lev":
int2
"Code":
string"33"
"key":
string"0HANo5pGWvHBLuonzePR"
}
3:{
5 items
"pid":
string"bvA6fuaFER7IQvpoCOSt"
"Name":
string"33"
"lev":
int2
"Code":
string"34"
"key":
string"0HA23233WvHBLuonzePR"
}
]
}
"Output":{}
0 items

Struct
"Struct":[
1 item
0:{
4 items
"id":
string"BasicInfo"
"name":
string"ListSelect"
"format":
string"Titletext"
"Items":[
1 item
0:{
8 items
"id":
string"Supply"
"name":
string"생산자"
"format":
string"ListSelect"
"dataprops":
string"ListData"
"columns":[
2 items
0:{
2 items
"dataField":
string"Code"
"text":
string"분류 코드"
}
1:{
2 items
"dataField":
string"Name"
"text":
string"분류 이름"
}
]
"keyField":
string"Code"
"viewField":
string"Name"
"searchBar":
booltrue
}
]
}
]

기본
ListSelect
생산자

"Output":{}
0 items

수정
ListSelect
생산자
분류 이름 :
ss
분류 코드
sss
분류 이름
ss

"Input":{
1 item
"Supply":{
2 items
"Code":
string"sss"
"Name":
string"ss"
}
}
"Output":{}
0 items

Struct
"Struct":[
1 item
0:{
4 items
"id":
string"BasicInfo"
"name":
string"ListSelects"
"format":
string"Titletext"
"Items":[
1 item
0:{
8 items
"id":
string"Supply"
"name":
string"생산자"
"format":
string"ListSelects"
"dataprops":
string"ListData"
"columns":[
2 items
0:{
2 items
"dataField":
string"Code"
"text":
string"분류 코드"
}
1:{
2 items
"dataField":
string"Name"
"text":
string"분류 이름"
}
]
"keyField":
string"Code"
"viewField":
string"Name"
"searchBar":
booltrue
}
]
}
]

기본
ListSelects
생산자
분류 이름 :

"Output":{}
0 items

수정
ListSelects
생산자
분류 이름 :
분류 코드
sss
분류 이름
ss
분류 코드
sss2
분류 이름
ss

"Input":{
1 item
"Supply":[
2 items
0:{
2 items
"Code":
string"sss"
"Name":
string"ss"
}
1:{
2 items
"Code":
string"sss2"
"Name":
string"ss"
}
]
}
"Output":{}
0 items

Struct
"Struct":[
1 item
0:{
4 items
"id":
string"BasicInfo"
"name":
string"Child"
"format":
string"Titletext"
"Items":[
2 items
0:{
3 items
"id":
string"Child1"
"key":
string"Child1"
"format":
string"Child"
}
1:{
3 items
"id":
string"Child2"
"key":
string"Child2"
"format":
string"Child"
}
]
}
]

기본
Child
Child1
Child2

"Output":{}
0 items
Struct
"Struct":[
1 item
0:{
4 items
"id":
string"BasicInfo"
"name":
string"Select"
"format":
string"Titletext"
"Items":[
1 item
0:{
4 items
"id":
string"Tex"
"name":
string"과세/비과세"
"format":
string"Select"
"SelectText":[
2 items
0
:
string"과세"
1
:
string"비과세"
]
}
]
}
]

기본
Select
과세/비과세

"Output":{}
0 items

수정
Select
과세/비과세

"Input":{
1 item
"Tex":
string"비과세"
}
"Output":{}
0 items

Struct
"Struct":[
1 item
0:{
4 items
"id":
string"BasicInfo"
"name":
string"UploadImage"
"format":
string"Titletext"
"Items":[
1 item
0:{
3 items
"id":
string"TitleImage"
"name":
string"대표 이미지"
"format":
string"UploadImage"
}
]
}
]

기본
UploadImage
대표 이미지

"Output":{}
0 items

수정
UploadImage
대표 이미지

기존 이미지
32336999427478920_808315976.jpg
32337004039335532_1333175870.jpg
32337004270315102_740479415.jpg
32337004565182638_1968441623.jpg

새 이미지

"Input":{
1 item
"TitleImage":{
1 item
"UrlList":[
4 items
0
:
string"https://shop-phinf.pstatic.net/20200717_47/15949746658893MYpr_JPEG/32336999427478920_808315976.jpg"
1
:
string"https://shop-phinf.pstatic.net/20200717_266/15949746704500kuIs_JPEG/32337004039335532_1333175870.jpg"
2
:
string"https://shop-phinf.pstatic.net/20200717_40/1594974670728XHsTz_JPEG/32337004270315102_740479415.jpg"
3
:
string"https://shop-phinf.pstatic.net/20200717_134/1594974670975548LS_JPEG/32337004565182638_1968441623.jpg"
]
}
}
"Output":{}
0 items

Struct
"Struct":[
1 item
0:{
4 items
"id":
string"BasicInfo"
"name":
string"UploadImageSingle"
"format":
string"Titletext"
"Items":[
1 item
0:{
3 items
"id":
string"SingleImage"
"name":
string"대표 이미지"
"format":
string"UploadImageSingle"
}
]
}
]

기본
UploadImageSingle
대표 이미지

"Output":{}
0 items

수정
UploadImageSingle
대표 이미지
https://shop-phinf.pstatic.net/20200717_47/15949746658893MYpr_JPEG/32336999427478920_808315976.jpg

"Input":{
1 item
"SingleImage":{
1 item
"Url":
string"https://shop-phinf.pstatic.net/20200717_47/15949746658893MYpr_JPEG/32336999427478920_808315976.jpg"
}
}
"Output":{}
0 items

Struct
"Struct":[
1 item
0:{
4 items
"id":
string"BasicInfo"
"name":
string"UploadFile"
"format":
string"Titletext"
"Items":[
1 item
0:{
3 items
"id":
string"TitleImage"
"name":
string"업로드 파일"
"format":
string"UploadFile"
}
]
}
]

기본
UploadFile
업로드 파일

"Output":{}
0 items

수정
UploadFile
업로드 파일

"Input":{
1 item
"TitleImage":{
1 item
"FileName":
string"test.file"
}
}
"Output":{}
0 items

Struct
"Struct":[
1 item
0:{
4 items
"id":
string"BasicInfo"
"name":
string"HtmlEditer"
"format":
string"Titletext"
"Items":[
1 item
0:{
3 items
"id":
string"HtmlEditer"
"name":
string"Html"
"format":
string"HtmlEditer"
}
]
}
]

기본
HtmlEditer
Html



"Output":{}
0 items

수정
HtmlEditer
Html

안녕하세요.

↵

테스트 입니다.


"Input":{
1 item
"HtmlEditer":
string"<p><strong>안녕하세요.</strong></p>↵<p>테스트 입니다.</p>"
}
"Output":{}
0 items

Struct
"Struct":[
1 item
0:{
4 items
"id":
string"BasicInfo"
"name":
string"Imageset"
"format":
string"Titletext"
"Items":[
1 item
0:{
3 items
"id":
string"Imageset"
"name":
string"대표 이미지"
"format":
string"Imageset"
}
]
}
]

기본
Imageset
대표 이미지

"Output":{}
0 items

수정
Imageset
대표 이미지

"Input":{
1 item
"Imageset":[
4 items
0
:
string"https://shop-phinf.pstatic.net/20200717_47/15949746658893MYpr_JPEG/32336999427478920_808315976.jpg"
1
:
string"https://shop-phinf.pstatic.net/20200717_266/15949746704500kuIs_JPEG/32337004039335532_1333175870.jpg"
2
:
string"https://shop-phinf.pstatic.net/20200717_40/1594974670728XHsTz_JPEG/32337004270315102_740479415.jpg"
3
:
string"https://shop-phinf.pstatic.net/20200717_134/1594974670975548LS_JPEG/32337004565182638_1968441623.jpg"
]
}
"Output":{}
0 items

Struct
"Struct":[
1 item
0:{
4 items
"id":
string"BasicInfo"
"name":
string"Tab"
"format":
string"Titletext"
"Items":[
1 item
0:{
5 items
"id":
string"TabPage"
"name":
string"Tab페이지"
"format":
string"Tab"
"default":
string"Tab2"
"Items":[
2 items
0:{
3 items
"id":
string"Tab1"
"name":
string"상품명"
"format":
string"Text"
}
1:{
4 items
"id":
string"Tab2"
"name":
string"상품번호"
"format":
string"CodeGen"
"prefix":
string"Code-"
}
]
}
]
}
]

기본
Tab
Tab페이지
상품번호
Code-1750232633

"Output":{}
0 items
Struct
"Struct":[
1 item
0:{
4 items
"id":
string"BasicInfo"
"name":
string"Textline"
"format":
string"Titletext"
"Items":[
1 item
0:{
3 items
"id":
string"Info"
"name":
string"Info"
"format":
string"Textline"
}
]
}
]

기본
Textline
Info

"Output":{}
0 items

수정
Textline
Info

"Input":{
1 item
"Info":
string"안녕하세요 안녕하세요 "
}
"Output":{}
0 items

Struct
"Struct":[
1 item
0:{
4 items
"id":
string"BasicInfo"
"name":
string"Date"
"format":
string"Titletext"
"Items":[
1 item
0:{
3 items
"id":
string"Date"
"name":
string"Date"
"format":
string"Date"
}
]
}
]

기본
Date
Date

"Output":{}
0 items

수정
Date
Date

"Input":{
1 item
"Date":
string"2011-11-12"
}
"Output":{}
0 items

Struct
"Struct":[
1 item
0:{
4 items
"id":
string"BasicInfo"
"name":
string"Option"
"format":
string"Titletext"
"Items":[
1 item
0:{
3 items
"id":
string"Option"
"name":
string"Option"
"format":
string"Option"
}
]
}
]

기본
Option
Option

"Output":{}
0 items

수정
Option
Option

"Input":{
1 item
"Option":
string"안녕하세요,안녕하세요,"
}
"Output":{}
0 items

Struct
"Struct":[
1 item
0:{
4 items
"id":
string"BasicInfo"
"name":
string"Switch"
"format":
string"Titletext"
"Items":[
1 item
0:{
9 items
"id":
string"Switch"
"name":
string"스위치"
"format":
string"Switch"
"onlabel":
string"켬"
"offlabel":
string"끔"
"onstyle":
string"success"
"offstyle":
string"warning"
"size":
string"sm"
"width":
int80
}
]
}
]

기본
Switch
스위치
켬끔

"Output":{}
0 items

수정
Switch
스위치
켬끔

"Input":{
1 item
"Switch":
booltrue
}
"Output":{}
0 items

Struct
"Struct":[
1 item
0:{
4 items
"id":
string"BasicInfo"
"name":
string"DatePicker"
"format":
string"Titletext"
"Items":[
1 item
0:{
5 items
"id":
string"DatePicker"
"name":
string"타이머"
"format":
string"DatePicker"
"showTimeSelect":
booltrue
"dateFormat":
string"yyyy-MM-dd HH:mm:ss"
}
]
}
]

기본
DatePicker
타이머

"Output":{}
0 items

수정
DatePicker
타이머

"Input":{
1 item
"DatePicker":
string"2021-02-14 04:00:00"
}
"Output":{}
0 items

Columns
"Columns":[
1 item
0:{
6 items
"dataField":
string"createdate"
"text":
string"시작일"
"sort":
booltrue
"format":
string"DateTime"
"Dateformat":
string"LL"
"align":
string"center"
}
]
Data
"Columns":[
2 items
0:{
1 item
"createdate":
string"2020-01-01 12:34:56"
}
1:{
1 item
"createdate":
string"2020-01-02 01:23:45"
}
]

테이블
시작일
2020년 1월 1일
2020년 1월 2일
Columns
"Columns":[
1 item
0:{
11 items
"dataField":
string"onoff"
"text":
string"스위치"
"sort":
booltrue
"format":
string"Switch"
"onlabel":
string"켬"
"offlabel":
string"끔"
"onstyle":
string"success"
"offstyle":
string"warning"
"size":
string"sm"
"width":
int80
"align":
string"center"
}
]
Data
"Columns":[
2 items
0:{
1 item
"onoff":
booltrue
}
1:{
1 item
"onoff":
boolfalse
}
]

테이블
스위치
켬끔
켬끔
Columns
"Columns":[
1 item
0:{
7 items
"dataField":
string"price"
"text":
string"가격"
"sort":
booltrue
"format":
string"Number"
"align":
string"center"
"thousandSeparator":
booltrue
"suffix":
string"원"
}
]
Data
"Columns":[
2 items
0:{
1 item
"price":
int12345
}
1:{
1 item
"price":
int1122334455
}
]

테이블
가격
12,345원
1,122,334,455원
Columns
"Columns":[
1 item
0:{
7 items
"dataField":
string"image"
"text":
string"이미지"
"sort":
booltrue
"format":
string"Image"
"align":
string"center"
"width":
int50
"height":
int50
}
]
Data
"Columns":[
2 items
0:{
1 item
"image":
string"https://shop-phinf.pstatic.net/20200717_47/15949746658893MYpr_JPEG/32336999427478920_808315976.jpg"
}
1:{
1 item
"image":
string"https://shop-phinf.pstatic.net/20200717_266/15949746704500kuIs_JPEG/32337004039335532_1333175870.jpg"
}
]

테이블
이미지
Columns
"Columns":[
1 item
0:{
7 items
"dataField":
string"images"
"text":
string"이미지"
"sort":
booltrue
"format":
string"Images"
"align":
string"center"
"width":
int50
"height":
int50
}
]
Data
"Columns":[
2 items
0:{
1 item
"images":[
4 items
0
:
string"https://shop-phinf.pstatic.net/20200717_47/15949746658893MYpr_JPEG/32336999427478920_808315976.jpg"
1
:
string"https://shop-phinf.pstatic.net/20200717_266/15949746704500kuIs_JPEG/32337004039335532_1333175870.jpg"
2
:
string"https://shop-phinf.pstatic.net/20200717_40/1594974670728XHsTz_JPEG/32337004270315102_740479415.jpg"
3
:
string"https://shop-phinf.pstatic.net/20200717_134/1594974670975548LS_JPEG/32337004565182638_1968441623.jpg"
]
}
1:{
1 item
"images":[
3 items
0
:
string"https://shop-phinf.pstatic.net/20200717_47/15949746658893MYpr_JPEG/32336999427478920_808315976.jpg"
1
:
string"https://shop-phinf.pstatic.net/20200717_266/15949746704500kuIs_JPEG/32337004039335532_1333175870.jpg"
2
:
string"https://shop-phinf.pstatic.net/20200717_40/1594974670728XHsTz_JPEG/32337004270315102_740479415.jpg"
]
}
]

테이블
이미지
Columns
"Columns":[
1 item
0:{
6 items
"dataField":
string"Name"
"text":
string"이름"
"sort":
booltrue
"format":
string"Button"
"align":
string"center"
"variant":
string"success"
}
]
Data
"Columns":[
2 items
0:{
1 item
"Name":
string"홍길동"
}
1:{
1 item
"Name":
string"김이박"
}
]

테이블
이름
Columns
"Columns":[
1 item
0:{
6 items
"dataField":
string"color"
"text":
string"색상"
"sort":
booltrue
"format":
string"Color"
"align":
string"center"
"variant":
string"success"
}
]
Data
"Columns":[
2 items
0:{
1 item
"color":
string"#00ff55"
}
1:{
1 item
"color":
string"#ff0033"
}
]

테이블
색상
#00ff55
#ff0033
Columns
"Columns":[
1 item
0:{
7 items
"dataField":
string"Json"
"text":
string"Json"
"sort":
booltrue
"format":
string"Jsonview"
"theme":
string"twilight"
"name":
string"Struct"
"iconStyle":
string"circle"
}
]
Data
"Columns":[
2 items
0:{
1 item
"Json":
string"{ "colorsArray":[{ "colorName":"red", "hexValue":"#f00" }, { "colorName":"green", "hexValue":"#0f0" }, { "colorName":"blue", "hexValue":"#00f" } ] }"
}
1:{
1 item
"Json":
string"{ "name":"Product", "properties": { "id": { "type":"number", "description":"Product identifier", "required":true }, "name": { "description":"Name of the product", "type":"string", "required":true }, "price": { "type":"number", "minimum":0, "required":true }, "tags": { "type":"array", "items": { "type":"string" } } } }"
}
]

테이블
Json
"Struct":{
1 item
"colorsArray":[
3 items
0:{
2 items
"colorName":
string"red"
"hexValue":
string"#f00"
}
1:{
2 items
"colorName":
string"green"
"hexValue":
string"#0f0"
}
2:{
2 items
"colorName":
string"blue"
"hexValue":
string"#00f"
}
]
}
"Struct":{
2 items
"name":
string"Product"
"properties":{
4 items
"id":{
3 items
"type":
string"number"
"description":
string"Product identifier"
"required":
booltrue
}
"name":{
3 items
"description":
string"Name of the product"
"type":
string"string"
"required":
booltrue
}
"price":{
3 items
"type":
string"number"
"minimum":
int0
"required":
booltrue
}
"tags":{
2 items
"type":
string"array"
"items":{
1 item
"type":
string"string"
}
}
}
}
Columns
"Columns":[
1 item
0:{
7 items
"dataField":
string"array"
"text":
string"Array"
"sort":
booltrue
"format":
string"Array"
"align":
string"center"
"custom":
booltrue
"color":
string"#aa88ff"
}
]
Data
"Columns":[
2 items
0:{
1 item
"array":[
5 items
0
:
int1
1
:
int2
2
:
int3
3
:
int4
4
:
int5
]
}
1:{
1 item
"array":[
4 items
0
:
string"a"
1
:
string"b"
2
:
string"c"
3
:
string"d"
]
}
]

테이블
Array
0 : 1
1 : 2
2 : 3
3 : 4
4 : 5
0 : a
1 : b
2 : c
3 : d
Columns
"Columns":[
2 items
0:{
2 items
"dataField":
string"name"
"text":
string"이름"
}
1:{
7 items
"dataField":
string"array"
"text":
string"Table"
"sort":
booltrue
"format":
string"Table"
"align":
string"center"
"custom":
booltrue
"color":
string"#aa88ff"
}
]
Data
"Columns":[
1 item
0:{
2 items
"name":
string"테이블 1"
"array":{
3 items
"keyField":
string"a"
"columns":[
3 items
0:{
2 items
"dataField":
string"a"
"text":
string"a"
}
1:{
2 items
"dataField":
string"b"
"text":
string"b"
}
2:{
2 items
"dataField":
string"c"
"text":
string"c"
}
]
"data":[
3 items
0:{
3 items
"a":
int1
"b":
int2
"c":
int3
}
1:{
3 items
"a":
int2
"b":
int3
"c":
int4
}
2:{
3 items
"a":
int5
"b":
int6
"c":
int7
}
]
}
}
]

테이블
이름Table
테이블 1
abc
123
234
567
Columns
"Columns":[
1 item
0:{
8 items
"dataField":
string"icon"
"text":
string"Icon"
"sort":
booltrue
"format":
string"Icon"
"align":
string"center"
"icons":[
3 items
0
:
string"●"
1:{
6 items
"$$typeof":
"type":
functionh(t){...}
"key":
NULL
"ref":
NULL
"props":{}
0 items
"_owner":
NULL
}
2:{
6 items
"$$typeof":
"type":
functiond(t){...}
"key":
NULL
"ref":
NULL
"props":{}
0 items
"_owner":
NULL
}
]
"colors":[
3 items
0
:
string"#0a0"
1
:
string"#ef4836"
2
:
string"#aa88ff"
]
"match":[
3 items
0
:
int1
1
:
int2
2
:
int3
]
}
]
Data
"Columns":[
4 items
0:{
1 item
"icon":
int1
}
1:{
1 item
"icon":
int2
}
2:{
1 item
"icon":
int3
}
3:{
1 item
"icon":
int4
}
]

테이블
Icon
●
Columns
"Columns":[
1 item
0:{
4 items
"dataField":
string"html"
"text":
string"Html"
"sort":
booltrue
"format":
string"Html"
}
]
Data
"Columns":[
2 items
0:{
1 item
"html":
string"<div>1234</div>"
}
1:{
1 item
"html":
string"<div><strong>1234</strong></div>"
}
]

테이블
Html
1234
1234
Columns
"Columns":[
1 item
0:{
4 items
"dataField":
string"html"
"text":
string"Html"
"sort":
booltrue
"formatter":
function=>Object(n.jsx)("div",{...}
}
]
Data
"Columns":[
2 items
0:{
1 item
"html":
string"<div>1234</div>"
}
1:{
1 item
"html":
string"<div><strong>1234</strong></div>"
}
]

테이블
Html
custom_Formatter
custom_Formatter
Code

<CreatePage 
	ModifyMode={false} 
	DataStruct={struct}
	onSubmit={this.onSubmitDefault}
	hierarchyData={HierarchySample}
	ListData={ListData}>
		<ChildComponent/>
		<ChildComponent/>
		<ChildComponent/>
</CreatePage>