auigrid-mcp-server 0.1.0

package/data/samples-index.json

@@ -0,0 +1,163 @@
+[
+  {
+    "name": "MyTextareaEditor",
+    "framework": "react-tsx",
+    "category": "editRenderers",
+    "relPath": "editRenderers\\MyTextareaEditor.ts",
+    "content": "// AUIGrid 커스텀 에디트렌더러 TextareaEditor import\r\nimport '../static/AUIGrid/editRenderers/AUIGrid.TextareaEditor';\r\nimport '../static/AUIGrid/editRenderers/AUIGrid.TextareaEditor.css';\r\nexport default window.AUIGrid.TextareaEditor;\r\n"
+  },
+  {
+    "name": "MyCalendarRenderer",
+    "framework": "react-tsx",
+    "category": "renderers",
+    "relPath": "renderers\\MyCalendarRenderer.ts",
+    "content": "// AUIGrid 커스텀렌더러 MyCalendarRenderer import\r\nimport '../static/AUIGrid/renderers/AUIGrid.MyCalendarRenderer';\r\nexport default window.AUIGrid.MyCalendarRenderer;\r\n"
+  },
+  {
+    "name": "MyInputRenderer",
+    "framework": "react-tsx",
+    "category": "renderers",
+    "relPath": "renderers\\MyInputRenderer.ts",
+    "content": "// AUIGrid 커스텀렌더러 MyInputRenderer import\r\nimport '../static/AUIGrid/renderers/AUIGrid.MyInputRenderer';\r\nimport '../static/AUIGrid/renderers/AUIGrid.MyInputRenderer.css';\r\nexport default window.AUIGrid.MyInputRenderer;\r\n"
+  },
+  {
+    "name": "CustomEditRendererTextarea",
+    "framework": "react-tsx",
+    "category": "samples",
+    "relPath": "samples\\CustomEditRendererTextarea.tsx",
+    "content": "import { useEffect, useRef } from 'react';\nimport * as IGrid from 'aui-grid';\nimport AUIGrid from '../static/AUIGrid-React.tsx/AUIGridReact';\nimport axios from 'axios';\nimport MyTextareaEditor from '../editRenderers/MyTextareaEditor';\nimport './CustomEditRendererTextarea.css';\n\nconst columnLayout: IGrid.Column[] = [\n\t{ dataField: 'no', headerText: 'No.', width: 50 },\n\t{\n\t\tdataField: 'title',\n\t\theaderText: 'Title',\n\t\twidth: 200,\n\t\teditRenderer: {\n\t\t\ttype: IGrid.EditRendererKind.CustomEditRenderer,\n\t\t\tjsClass: MyTextareaEditor,\n\t\t\tvPosition: 'top',\n\t\t\tfitWidth: true\n\t\t}\n\t},\n\t{\n\t\tdataField: 'content',\n\t\theaderText: 'Content',\n\t\tstyle: 'my-wrap-column',\n\t\twidth: 400,\n\t\teditRenderer: {\n\t\t\ttype: IGrid.EditRendererKind.CustomEditRenderer,\n\t\t\tjsClass: MyTextareaEditor,\n\t\t\tvPosition: 'top',\n\t\t\tfitWidth: true,\n\t\t\textraProps: { confirm: '확 인(Ctrl+Enter)', cancel: '취 소(Esc)' }\n\t\t}\n\t},\n\t{ dataField: 'date', headerText: 'Date', width: 140 }\n];\n\nconst gridProps: IGrid.Props = {\n\twidth: '100%',\n\theight: 480,\n\teditable: true,\n\twordWrap: true,\n\tselectionMode: 'multipleCells'\n};\n\nconst EditRendererCustom1 = () => {\n\tconst myGrid = useRef<AUIGrid>(null);\n\n\tuseEffect(() => {\n\t\tconst grid = myGrid.current as AUIGrid;\n\n\t\tgrid.bind(IGrid.EventKind.Ready, (event: IGrid.ReadyEvent) => {\n\t\t\tconsole.log(event);\n\t\t});\n\n\t\tgrid.bind([IGrid.EventKind.CellClick, IGrid.EventKind.HeaderClick], (event: IGrid.CellClickEvent | IGrid.HeaderClickEvent) => {\n\t\t\tswitch (event.type) {\n\t\t\t\tcase IGrid.EventKind.CellClick:\n\t\t\t\t\tconsole.log((event as IGrid.CellClickEvent).value);\n\t\t\t\t\tbreak;\n\t\t\t\tcase IGrid.EventKind.HeaderClick:\n\t\t\t\t\tconsole.log(event.headerText);\n\t\t\t\t\tbreak;\n\t\t\t}\n\t\t});\n\n\t\tgrid.bind(IGrid.EventKind.CellDoubleClick, (event: IGrid.CellDoubleClickEvent) => {\n\t\t\tconsole.log(event);\n\t\t});\n\n\t\tgrid.showAjaxLoader();\n\t\taxios.get('./data/article_list.json').then((result) => {\n\t\t\tgrid.setGridData(result.data);\n\t\t\tgrid.removeAjaxLoader();\n\t\t});\n\t}, []);\n\n\treturn (\n\t\t<div>\n\t\t\t<div className=\"desc\">\n\t\t\t\t<p>리액트 + Typescript 에서 어떻게 CustomEditRenderer 를 정의하고 사용하는지를 보여주는 데모입니다.</p>\n\t\t\t\t<p>이 샘플은 일반 JS에 작성한 AUIGrid.TextareaEditor 를 리액트 + Typescript 로 출력한 모습입니다.</p>\n\t\t\t\t<p>\n\t\t\t\t\t즉,{' '}\n\t\t\t\t\t<a href=\"https://www.auisoft.net/demo/auigrid/editRenderer_custom_1.html?er_cus_1&theme=default&s=5648\" target=\"_blank\" rel=\"noreferrer\">\n\t\t\t\t\t\t<strong>사용자 정의 에디트렌더러 - textarea 샘플</strong>\n\t\t\t\t\t</a>\n\t\t\t\t\t을 그대로 리액트 + Typescript 로 작성한 데모입니다.\n\t\t\t\t</p>\n\t\t\t</div>\n\t\t\t<AUIGrid ref={myGrid} columnLayout={columnLayout} gridProps={gridProps} />\n\t\t</div>\n\t);\n};\n\nexport default EditRendererCustom1;\n"
+  },
+  {
+    "name": "CustomRendererInput",
+    "framework": "react-tsx",
+    "category": "samples",
+    "relPath": "samples\\CustomRendererInput.tsx",
+    "content": "import { useEffect, useId, useRef } from 'react';\nimport * as IGrid from 'aui-grid';\nimport AUIGrid from '../static/AUIGrid-React.tsx/AUIGridReact';\nimport MyInputRenderer from '../renderers/MyInputRenderer';\n\nconst gridData = [\n\t{ name: 'Anna', country: 'Japan' },\n\t{ name: 'Emma', country: 'USA' },\n\t{ name: 'Steve', country: 'Italy' },\n\t{ name: 'Jennifer', country: 'China' },\n\t{ name: 'Jennifer', country: 'UK' },\n\t{ name: 'Lawrence', country: 'Singapore' },\n\t{ name: 'Jennifer', country: 'Japan' },\n\t{ name: 'Steve', country: 'Ireland' },\n\t{ name: 'Anna', country: 'Italy' },\n\t{ name: 'Kim', country: 'France' },\n\t{ name: 'Emma', country: 'China' },\n\t{ name: 'Jennifer', country: 'France' },\n\t{ name: 'Kim', country: 'Japan' },\n\t{ name: 'Steve', country: 'USA' },\n\t{ name: 'Emma', country: 'France' },\n\t{ name: 'Emma', country: 'USA' },\n\t{ name: 'Emma', country: 'Italy' },\n\t{ name: 'Emma', country: 'Japan' },\n\t{ name: 'Lawrence', country: 'Korea' },\n\t{ name: 'Jennifer', country: 'Japan' },\n\t{ name: 'Steve', country: 'USA' }\n];\n\nconst columnLayout: IGrid.Column[] = [\n\t{ dataField: 'name', headerText: 'Name', width: 260 },\n\t{\n\t\tdataField: 'country',\n\t\theaderText: '커스텀 렌더러-Input',\n\t\twidth: 280,\n\t\twidthFit: 140,\n\t\teditable: false,\n\t\theaderTooltip: { show: true, tooltipHtml: '사용자 정의 렌더러를 작성한 칼럼입니다.' },\n\t\trenderer: { type: IGrid.RendererKind.CustomRenderer, jsClass: MyInputRenderer }\n\t}\n];\n\nconst gridProps: IGrid.Props = {\n\twidth: '100%',\n\theight: 480,\n\trowHeight: 34,\n\teditable: true,\n\tshowStateColumn: true\n};\n\nconst CustomRendererInput = () => {\n\tconst myGrid = useRef<AUIGrid>(null);\n\tconst uid = useId();\n\n\tuseEffect(() => {\n\t\tconst grid = myGrid.current as AUIGrid;\n\n\t\tgrid.bind(IGrid.EventKind.Ready, (event: IGrid.ReadyEvent) => {\n\t\t\tconsole.log(event);\n\t\t});\n\n\t\tgrid.bind([IGrid.EventKind.CellClick, IGrid.EventKind.HeaderClick], (event: IGrid.CellClickEvent | IGrid.HeaderClickEvent) => {\n\t\t\tswitch (event.type) {\n\t\t\t\tcase IGrid.EventKind.CellClick:\n\t\t\t\t\tconsole.log((event as IGrid.CellClickEvent).value);\n\t\t\t\t\tbreak;\n\t\t\t\tcase IGrid.EventKind.HeaderClick:\n\t\t\t\t\tconsole.log(event.headerText);\n\t\t\t\t\tbreak;\n\t\t\t}\n\t\t});\n\n\t\tgrid.bind(IGrid.EventKind.CellDoubleClick, (event: IGrid.CellDoubleClickEvent) => {\n\t\t\tconsole.log(event);\n\t\t});\n\n\t\tgrid.setGridData(gridData);\n\t}, []);\n\n\treturn (\n\t\t<div>\n\t\t\t<div className=\"desc\">\n\t\t\t\t<p>React.js + Typescript에서 어떻게 CustomRenderer 를 정의하고 사용하는지를 보여주는 데모입니다.</p>\n\t\t\t\t<p>이 샘플은 일반 JS에 작성한 AUIGrid.MyInputRenderer 를 React.js + Typescript로 출력한 모습입니다.</p>\n\t\t\t\t<p>\n\t\t\t\t\t즉,{' '}\n\t\t\t\t\t<a href=\"https://www.auisoft.net/demo/auigrid/renderer_custom_input.html?er_cus_1&theme=default&s=5700\" target=\"_blank\" rel=\"noreferrer\">\n\t\t\t\t\t\t{' '}\n\t\t\t\t\t\t<strong>사용자 정의 렌더러 - Input 샘플</strong>\n\t\t\t\t\t</a>\n\t\t\t\t\t을 그대로 React.js + Typescript로 작성한 데모입니다.\n\t\t\t\t</p>\n\t\t\t</div>\n\t\t\t<AUIGrid ref={myGrid} name={uid} columnLayout={columnLayout} gridProps={gridProps} />\n\t\t</div>\n\t);\n};\n\nexport default CustomRendererInput;\n"
+  },
+  {
+    "name": "EditDropDownData",
+    "framework": "react-tsx",
+    "category": "samples",
+    "relPath": "samples\\data\\EditDropDownData.ts",
+    "content": "const editDropDownData: any[] = [\r\n\t{ index: 1, id: '#Cust1', color: 'White', color2: 'None', dept: '002', position: '사장', group: 'A', leaf: 'A-1' },\r\n\t{ index: 2, id: '#Cust2', color: 'Red', color2: 'None', dept: '003', position: '부사장', group: 'A', leaf: 'A-1' },\r\n\t{ index: 3, id: '#Cust3', color: 'Blue', color2: 'None', dept: '004', position: '상무', group: 'A', leaf: 'A-1' },\r\n\t{ index: 4, id: '#Cust4', color: 'Black', color2: 'None', dept: '001', position: '전무', group: 'A', leaf: 'A-1' },\r\n\t{ index: 5, id: '#Cust5', color: 'White', color2: 'None', dept: '002', position: '이사', group: 'A', leaf: 'A-1' },\r\n\t{ index: 6, id: '#Cust0', color: 'Red', color2: 'None', dept: '003', position: '부장', group: 'A', leaf: 'A-1' },\r\n\t{ index: 7, id: '#Cust1', color: 'Blue', color2: 'None', dept: '004', position: '차장', group: 'A', leaf: 'A-1' },\r\n\t{ index: 8, id: '#Cust2', color: 'Black', color2: 'None', dept: '001', position: '과장', group: 'A', leaf: 'A-1' },\r\n\t{ index: 9, id: '#Cust3', color: 'White', color2: 'None', dept: '002', position: '대리', group: 'A', leaf: 'A-1' },\r\n\t{ index: 10, id: '#Cust4', color: 'Red', color2: 'None', dept: '003', position: '사원', group: 'A', leaf: 'A-1' },\r\n];\r\n\r\nexport default editDropDownData;\r\n"
+  },
+  {
+    "name": "RendererTemplateData",
+    "framework": "react-tsx",
+    "category": "samples",
+    "relPath": "samples\\data\\RendererTemplateData.ts",
+    "content": "// 그리드 데이터\r\nexport const gridData: any[] = [\r\n\t{ name: 'Steve', code: '001', check: 'v1' },\r\n\t{ name: 'Emma', code: '003', check: 'v1,v2,v3' },\r\n\t{ name: 'Steve', code: '004', check: 'v2' },\r\n\t{ name: 'Anna', code: '003', check: 'v1,v2,v3' },\r\n\t{ name: 'Lawrence', code: '005', check: 'v1,v2,v3' },\r\n\t{ name: 'Steve', code: '003', check: 'v1,v2,v3' },\r\n\t{ name: 'Anna', code: '002', check: 'v1,v2,v3' },\r\n\t{ name: 'Lawrence', code: '002', check: 'v3' },\r\n\t{ name: 'Lawrence', code: 'None', check: 'v1,v3' },\r\n\t{ name: 'Kim', code: '001', check: 'v1,v2' },\r\n\t{ name: 'Emma', code: '005', check: 'v1,v2,v3' },\r\n\t{ name: 'Kim', code: '002', check: 'v1,v2,v3' },\r\n\t{ name: 'Kim', code: 'None', check: 'v1,v2,v3' },\r\n\t{ name: 'Steve', code: '001', check: 'v1,v2,v3' },\r\n\t{ name: 'Anna', code: '005', check: 'v1,v3' },\r\n\t{ name: 'Anna', code: '005', check: 'v1,v2,v3' },\r\n\t{ name: 'Kim', code: '001', check: 'v3' },\r\n\t{ name: 'Steve', code: 'None', check: 'v1,v2,v3' },\r\n\t{ name: 'Kim', code: '002', check: 'v2,v3' },\r\n\t{ name: 'Kim', code: '001', check: 'v1,v2,v3' }\r\n];\r\n\r\n// 템플릿에 셀렉트 표현할 리스트\r\nexport const selectList: any[] = [\r\n\t{ value: '001', text: '선택 1' },\r\n\t{ value: '002', text: '선택 2' },\r\n\t{ value: '003', text: '선택 3' },\r\n\t{ value: '004', text: '선택 4' },\r\n\t{ value: '005', text: '선택 5' }\r\n];\r\n\r\n// 템플릿에 출력할 체크박스 그룹\r\nexport const checkboxGroup: any[] = [\r\n\t{ value: 'v1', label: '값1' },\r\n\t{ value: 'v2', label: '값2' },\r\n\t{ value: 'v3', label: '값3' }\r\n];\r\n"
+  },
+  {
+    "name": "TreeGridFlatData",
+    "framework": "react-tsx",
+    "category": "samples",
+    "relPath": "samples\\data\\TreeGridFlatData.ts",
+    "content": "const treeGridFlatData: any[] = [\r\n\t{ rowId: 'r1', id: '1', name: 'Phase 1 - Strategic Plan' },\r\n\t{ rowId: 'r2', id: '2', name: 'Self-Assessment', parent: '1' },\r\n\t{ rowId: 'r3', id: '3', name: 'Define business vision', parent: '2' },\r\n\t{ rowId: 'r4', id: '4', name: 'Identify available skills, information and support', parent: '2' },\r\n\t{ rowId: 'r5', id: '5', name: 'Decide whether to proceed', parent: '2' },\r\n\t{ rowId: 'r6', id: '6', name: 'Define the Opportunity', parent: '1' },\r\n\t{ rowId: 'r7', id: '7', name: 'Research the market and competition', parent: '6' },\r\n\t{ rowId: 'r8', id: '8', name: 'Interview owners of similar businesses', parent: '6' },\r\n\t{ rowId: 'r9', id: '9', name: 'Identify needed resources', parent: '6' },\r\n\t{ rowId: 'r10', id: '10', name: 'Identify operating cost elements', parent: '6' },\r\n\t{ rowId: 'r11', id: '11', name: 'Evaluate Business Approach', parent: '1' },\r\n\t{ rowId: 'r12', id: '12', name: 'Define new entity requirements', parent: '11' },\r\n\t{ rowId: 'r13', id: '13', name: 'Identify on-going business purchase opportunities', parent: '11' },\r\n\t{ rowId: 'r14', id: '14', name: 'Research franchise possibilities', parent: '11' },\r\n\t{ rowId: 'r15', id: '15', name: 'Summarize business approach', parent: '11' },\r\n\t{ rowId: 'r16', id: '16', name: 'Evaluate Potential Risks and Rewards', parent: '1' },\r\n\t{ rowId: 'r17', id: '17', name: 'Assess market size and stability', parent: '16' },\r\n\t{ rowId: 'r18', id: '18', name: 'Estimate the competition', parent: '16' },\r\n\t{ rowId: 'r19', id: '19', name: 'Assess needed resource availability', parent: '16' },\r\n\t{ rowId: 'r20', id: '20', name: 'Evaluate realistic initial market share', parent: '16' },\r\n\t{ rowId: 'r21', id: '21', name: 'Determine financial requirements', parent: '16' },\r\n\t{ rowId: 'r22', id: '22', name: 'Review personal suitability', parent: '16' },\r\n\t{ rowId: 'r23', id: '23', name: 'Evaluate initial profitability', parent: '16' },\r\n\t{ rowId: 'r24', id: '24', name: 'Review and modify the strategic plan', parent: '1' },\r\n\t{ rowId: 'r25', id: '25', name: 'Confirm decision to proceed', parent: '1' },\r\n\t{ rowId: 'r26', id: '26', name: 'Phase 2 - Define the Business Opportunity' },\r\n\t{ rowId: 'r27', id: '27', name: 'Define the Market', parent: '26' },\r\n\t{ rowId: 'r28', id: '28', name: 'Access available information', parent: '27' },\r\n\t{ rowId: 'r29', id: '29', name: 'Create market analysis plan', parent: '27' },\r\n\t{ rowId: 'r30', id: '30', name: 'Implement market analysis plan', parent: '27' },\r\n\t{ rowId: 'r31', id: '31', name: 'Identify competition', parent: '27' },\r\n\t{ rowId: 'r32', id: '32', name: 'Summarize the market', parent: '27' },\r\n\t{ rowId: 'r33', id: '33', name: 'Identify target market niche', parent: '27' },\r\n\t{ rowId: 'r34', id: '34', name: 'Identify Needed Materials and Supplies', parent: '26' },\r\n\t{ rowId: 'r35', id: '35', name: \"Select a business approach (from 'Evaluate Business Approach' above)\", parent: '34' },\r\n\t{ rowId: 'r36', id: '36', name: 'Identify management staff resources', parent: '34' },\r\n\t{ rowId: 'r37', id: '37', name: 'Identify staffing requirements', parent: '34' },\r\n\t{ rowId: 'r38', id: '38', name: 'Identify needed raw materials', parent: '34' },\r\n\t{ rowId: 'r39', id: '39', name: 'Identify needed utilities', parent: '34' },\r\n\t{ rowId: 'r40', id: '40', name: 'Summarize operating expenses and financial projections', parent: '34' },\r\n\t{ rowId: 'r41', id: '41', name: 'Evaluate Potential Risks and Rewards', parent: '26' },\r\n\t{ rowId: 'r42', id: '42', name: 'Assess market size and stability', parent: '41' },\r\n\t{ rowId: 'r43', id: '43', name: 'Assess needed resources availability', parent: '41' },\r\n\t{ rowId: 'r44', id: '44', name: 'Forecast financial returns', parent: '41' },\r\n\t{ rowId: 'r45', id: '45', name: 'Review and modify the business opportunity', parent: '26' },\r\n\t{ rowId: 'r46', id: '46', name: 'Confirm decision to proceed', parent: '26' },\r\n];\r\nexport default treeGridFlatData;\r\n"
+  },
+  {
+    "name": "DragToDropTwoGrid",
+    "framework": "react-tsx",
+    "category": "samples",
+    "relPath": "samples\\DragToDropTwoGrid.tsx",
+    "content": "import { useEffect, useRef } from 'react';\nimport * as IGrid from 'aui-grid';\nimport AUIGrid from '../static/AUIGrid-React.tsx/AUIGridReact';\nimport axios from 'axios';\n\nconst PUBLIC_URL = process.env.PUBLIC_URL;\n\nconst columnLayoutMaster: IGrid.Column[] = [\n\t{ dataField: 'id', headerText: 'ID', width: 160 },\n\t{ dataField: 'name', headerText: 'Name', width: 160 },\n\t{\n\t\tdataField: 'flag',\n\t\theaderText: 'Flag IMG',\n\t\teditable: false,\n\t\tprefix: PUBLIC_URL + '/assets/',\n\t\trenderer: { type: IGrid.RendererKind.ImageRenderer, imgHeight: 24, altField: 'country' },\n\t\twidth: 100\n\t},\n\t{ dataField: 'product', headerText: 'Product', width: 140 },\n\t{ dataField: 'color', headerText: 'Color', width: 100 },\n\t{ dataField: 'price', headerText: 'Price', dataType: 'numeric', style: 'my-column', width: 120 },\n\t{ dataField: 'quantity', headerText: 'Quantity', dataType: 'numeric', style: 'my-column', width: 100 },\n\t{\n\t\tdataField: 'date',\n\t\theaderText: 'Date',\n\t\tdataType: 'date',\n\t\tdateInputFormat: 'yyyy-mm-dd',\n\t\tformatString: 'yyyy년 mm월 dd일',\n\t\twidth: 140\n\t}\n];\n\nconst gridMasterProps: IGrid.Props = {\n\twidth: '100%',\n\theight: 280,\n\tselectionMode: 'multipleCells',\n\tenableDrag: true,\n\tenableMultipleDrag: true,\n\tenableDragByCellDrag: true,\n\tenableDrop: true,\n\tdropToOthers: true\n};\n\nconst columnLayoutDetail: IGrid.Column[] = [\n\t{ dataField: 'id', headerText: 'ID', width: 160 },\n\t{ dataField: 'name', headerText: 'Name', width: 140 },\n\t{ dataField: 'country', headerText: 'Country', width: 140 },\n\t{ dataField: 'product', headerText: 'Product', width: 180 }\n];\n\nconst gridDetailProps: IGrid.Props = {\n\twidth: '100%',\n\theight: 280,\n\tenableDrag: true,\n\tenableMultipleDrag: true,\n\tenableDragByCellDrag: true,\n\tenableDrop: true,\n\tdropToOthers: true\n};\n\nconst DragToDropTwoGrid = () => {\n\tconst myMasterGrid = useRef<AUIGrid>(null);\n\tconst myDetailGrid = useRef<AUIGrid>(null);\n\n\tuseEffect(() => {\n\t\tconst dropEndEventHandler = (e: IGrid.DropEndEvent) => {\n\t\t\tconst msg = `그리드 ${e.pid} → ${e.pidToDrop} 드랍 완료 : ${e.fromRowIndex}→${e.toRowIndex} 에 ${e.items.length} 행(들) 드랍 됨`;\n\t\t\tconsole.log(msg);\n\t\t};\n\n\t\tmyMasterGrid.current?.bind(IGrid.EventKind.DropEnd, dropEndEventHandler);\n\t\tmyDetailGrid.current?.bind(IGrid.EventKind.DropEnd, dropEndEventHandler);\n\t\tmyDetailGrid.current?.setGridData([]);\n\n\t\tconst grid = myMasterGrid.current as AUIGrid;\n\t\tgrid.showAjaxLoader();\n\t\taxios.get('./data/normal_100.json').then((result) => {\n\t\t\tgrid.setGridData(result.data);\n\t\t\tgrid.removeAjaxLoader();\n\t\t});\n\t}, []);\n\n\treturn (\n\t\t<div>\n\t\t\t<div className=\"desc\">\n\t\t\t\t<p>두 개의 그리드 간의 드래그&드랍으로 행 이동을 정의한 모습입니다.(두 그리드 상호 간의 드래그&드랍))</p>\n\t\t\t\t<p>드래그&드랍으로 다른 그리드에 행을 이동 시킨 경우 이동 전 그리드는 행 삭제로, 이동 된 그리드는 행 추가로 인식됩니다.</p>\n\t\t\t</div>\n\t\t\t<h4 style={{ textAlign: 'left' }}> 상단 마스터 그리드</h4>\n\t\t\t<AUIGrid ref={myMasterGrid} columnLayout={columnLayoutMaster} gridProps={gridMasterProps} />\n\t\t\t<h4 style={{ textAlign: 'left', height: 20 }}>하단 디테일 그리드</h4>\n\t\t\t<AUIGrid ref={myDetailGrid} columnLayout={columnLayoutDetail} gridProps={gridDetailProps} />\n\t\t</div>\n\t);\n};\n\nexport default DragToDropTwoGrid;\n"
+  },
+  {
+    "name": "EditDropDown",
+    "framework": "react-tsx",
+    "category": "samples",
+    "relPath": "samples\\EditDropDown.tsx",
+    "content": "import { useCallback, useEffect, useMemo, useRef } from 'react';\nimport * as IGrid from 'aui-grid';\nimport AUIGrid from '../static/AUIGrid-React.tsx/AUIGridReact';\nimport axios from 'axios';\nimport data from './data/EditDropDownData';\n\nconst PUBLIC_URL = process.env.PUBLIC_URL;\n\nconst gridProps: IGrid.Props = {\n\twidth: '100%',\n\theight: 480,\n\teditable: true\n};\n\nconst EditDropDown = () => {\n\tconst myGrid = useRef<AUIGrid>(null);\n\n\tconst posListRef = useRef<any>([]);\n\tconst myListRef = useRef<any>([]);\n\tconst colorListRef = useRef<any>([]);\n\tconst keyValueListRef = useRef<any>([]);\n\tconst groupListRef = useRef<any>([]);\n\tconst groupAListRef = useRef<any>([]);\n\tconst groupBListRef = useRef<any>([]);\n\tconst groupCListRef = useRef<any>([]);\n\n\tconst columnLayout = useMemo<IGrid.Column[]>(() => [\n\t\t{\n\t\t\tdataField: 'position',\n\t\t\theaderText: '직급',\n\t\t\twidth: 140,\n\t\t\trenderer: {\n\t\t\t\ttype: IGrid.RendererKind.IconRenderer,\n\t\t\t\ticonWidth: 16,\n\t\t\t\ticonHeight: 16,\n\t\t\t\ticonPosition: 'aisleRight',\n\t\t\t\ticonTableRef: { default: PUBLIC_URL + '/assets/arrow-down-black-icon.png' },\n\t\t\t\tonClick: () => myGrid.current?.openInputer()\n\t\t\t},\n\t\t\teditRenderer: {\n\t\t\t\ttype: IGrid.EditRendererKind.DropDownListRenderer,\n\t\t\t\tshowEditorBtn: false,\n\t\t\t\tshowEditorBtnOver: false,\n\t\t\t\tlistFunction: () => posListRef.current\n\t\t\t}\n\t\t},\n\t\t{\n\t\t\tdataField: 'id',\n\t\t\theaderText: '이름',\n\t\t\theaderTooltip: { show: true, tooltipHtml: '출력 리스트를 사용자 정의 하여 복잡한 구조로 작성. key-value 모드' },\n\t\t\twidth: 140,\n\t\t\tlabelFunction: (_rowIndex, _columnIndex, value) => {\n\t\t\t\tconst found = myListRef.current.find((item: any) => item.id === value);\n\t\t\t\treturn found ? found.name : value;\n\t\t\t},\n\t\t\teditRenderer: {\n\t\t\t\ttype: IGrid.EditRendererKind.DropDownListRenderer,\n\t\t\t\tshowEditorBtnOver: true,\n\t\t\t\tkeyField: 'id',\n\t\t\t\tvalueField: 'name',\n\t\t\t\tlistFunction: () => myListRef.current,\n\t\t\t\tlistTemplateFunction: (_rowIndex, _columnIndex, _text, _item, _dataField, listItem) => {\n\t\t\t\t\tlet html = '<div style=\"display:block;text-align:left;white-space:nowrap\">';\n\t\t\t\t\thtml += `<img src=\"./assets/${listItem.flag}\" width=\"30\" height=\"20\" style=\"vertical-align:middle;padding-right:10px;\"/>`;\n\t\t\t\t\tfor (const n in listItem) {\n\t\t\t\t\t\tif (n !== 'flag') {\n\t\t\t\t\t\t\thtml += `<span style=\"display:inline-block;width:80px;\">${listItem[n]}</span>`;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\thtml += '</div>';\n\t\t\t\t\treturn html;\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t\t{\n\t\t\tdataField: 'color',\n\t\t\theaderText: '컬러',\n\t\t\twidth: 140,\n\t\t\theaderTooltip: {\n\t\t\t\tshow: true,\n\t\t\t\ttooltipHtml: '리스트에서 아이템 선택 후 재선택 가능토록<br/>다른 셀 클릭 전까지 완료가 되지 않습니다.(easyMode=false)'\n\t\t\t},\n\t\t\teditRenderer: {\n\t\t\t\ttype: IGrid.EditRendererKind.DropDownListRenderer,\n\t\t\t\tshowEditorBtnOver: true,\n\t\t\t\teasyMode: false,\n\t\t\t\tlistFunction: () => colorListRef.current\n\t\t\t}\n\t\t},\n\t\t{\n\t\t\tdataField: 'color2',\n\t\t\theaderText: '조건 리스트',\n\t\t\twidth: 140,\n\t\t\theaderTooltip: { show: true, tooltipHtml: '특정 조건에 따라 다르게 리스트 출력<br>컬러 값에 따라 리스트가 다르게 나옵니다.' },\n\t\t\teditRenderer: {\n\t\t\t\ttype: IGrid.EditRendererKind.DropDownListRenderer,\n\t\t\t\tshowEditorBtnOver: true,\n\t\t\t\tlistFunction: (_rowIndex, _columnIndex, item) => {\n\t\t\t\t\tif (item.color === 'Black') return ['어두움', '단순함', '악함', '더러움'];\n\t\t\t\t\tif (item.color === 'White') return ['밝음', '순수함', '선함', '깨끗함'];\n\t\t\t\t\tif (item.color === 'Red') return ['강렬함', '열정적임'];\n\t\t\t\t\treturn ['차분함', '시원함', '희망적임'];\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t\t{\n\t\t\tdataField: 'dept',\n\t\t\theaderText: '부서명',\n\t\t\twidth: 140,\n\t\t\theaderTooltip: { show: true, tooltipHtml: 'key-value 형태의 수정 예제. 실제 데이터는 001, 002 와 같이 구성됨.' },\n\t\t\tlabelFunction: (_rowIndex, _columnIndex, value) => {\n\t\t\t\tconst found = keyValueListRef.current.find((item: any) => item.code === value);\n\t\t\t\treturn found ? found.value : value;\n\t\t\t},\n\t\t\teditRenderer: {\n\t\t\t\ttype: IGrid.EditRendererKind.DropDownListRenderer,\n\t\t\t\tkeyField: 'code',\n\t\t\t\tvalueField: 'value',\n\t\t\t\tlistFunction: () => keyValueListRef.current\n\t\t\t}\n\t\t},\n\t\t{\n\t\t\tdataField: 'group',\n\t\t\theaderText: '그룹',\n\t\t\twidth: 140,\n\t\t\teditRenderer: {\n\t\t\t\ttype: IGrid.EditRendererKind.DropDownListRenderer,\n\t\t\t\tdescendants: ['leaf'],\n\t\t\t\tdescendantDefaultValues: ['-'],\n\t\t\t\tlistFunction: () => groupListRef.current\n\t\t\t}\n\t\t},\n\t\t{\n\t\t\tdataField: 'leaf',\n\t\t\theaderText: '그룹 하위',\n\t\t\twidth: 140,\n\t\t\teditRenderer: {\n\t\t\t\ttype: IGrid.EditRendererKind.DropDownListRenderer,\n\t\t\t\tlistFunction: (_rowIndex, _columnIndex, item) => {\n\t\t\t\t\tif (item.group === 'A') return groupAListRef.current;\n\t\t\t\t\tif (item.group === 'B') return groupBListRef.current;\n\t\t\t\t\treturn groupCListRef.current;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t], []);\n\n\tuseEffect(() => {\n\t\tasync function fetchListData() {\n\t\t\tconst response = await axios.get('./data/drop_list_data.json');\n\t\t\tposListRef.current = response.data.posList;\n\t\t\tmyListRef.current = response.data.myList;\n\t\t\tcolorListRef.current = response.data.colorList;\n\t\t\tkeyValueListRef.current = response.data.keyValueList;\n\t\t\tgroupListRef.current = response.data.groupList;\n\t\t\tgroupAListRef.current = response.data.groupAList;\n\t\t\tgroupBListRef.current = response.data.groupBList;\n\t\t\tgroupCListRef.current = response.data.groupCList;\n\n\t\t\t(myGrid.current as AUIGrid).setGridData(data);\n\t\t}\n\n\t\tfetchListData();\n\t}, []);\n\n\tconst getGridData = useCallback(() => {\n\t\tconsole.log((myGrid.current as AUIGrid).getGridData());\n\t}, []);\n\n\treturn (\n\t\t<div>\n\t\t\t<div className=\"desc\">\n\t\t\t\t<p>리액트에서 상태 관리는 보통 useState 로 하지만, useState 상태는 리액트 라이프사이클에 의해 재렌더링을 하기 때문에 useRef 로 상태 값 관리만 합니다.</p>\n\t\t\t\t<p>즉, 상태값에 따라 DOM 의 변화가 생겨야 하는 경우는 useState, 그렇지 않은 경우 useRef.</p>\n\t\t\t\t<p>그리고 useState 로 값 변경 시 함수형 컴포넌트는 해당 함수를 다시 호출함으로써 모든 선언문들이 재정의됩니다. 이것은 메모리 어딘가에 또 다시 선언되어 보관된다는 뜻임.</p>\n\t\t\t\t<p>최초의 columnLayout 이 그리드의 진짜 칼럼레이아웃이며 이후 useState 나 기타 Hook 에 의해 다시 선언된 columnLayout 들은 그리드와 무관한 메모리 어딘가에 선언만 된 상태임.(이들의 참조값은 엄연히 다름)</p>\n\t\t\t\t<button onClick={getGridData}>그리드 데이터 콘솔에 출력</button>\n\t\t\t</div>\n\t\t\t<AUIGrid ref={myGrid} columnLayout={columnLayout} gridProps={gridProps} />\n\t\t</div>\n\t);\n};\n\nexport default EditDropDown;\n"
+  },
+  {
+    "name": "ExportGridDataView",
+    "framework": "react-tsx",
+    "category": "samples",
+    "relPath": "samples\\ExportGridDataView.tsx",
+    "content": "import { useCallback } from 'react';\nimport FileSaver from 'file-saver';\n// eslint-disable-next-line\nimport '../static/AUIGrid.pdfkit/AUIGrid.pdfkit';\nimport AUIGrid from '../static/AUIGrid-React.tsx/AUIGridReact';\n\ninterface IProps {\n\tmyGrid: React.RefObject<AUIGrid>;\n\txlsxProps?: Record<string, any>;\n\tpdfProps?: Record<string, any>;\n}\n\ndeclare global {\n\tinterface Window {\n\t\tsaveAs: typeof FileSaver.saveAs;\n\t}\n}\n\nwindow.saveAs = FileSaver.saveAs;\n\nconst ExportGridDataView = ({ myGrid, xlsxProps = {}, pdfProps = {} }: IProps) => {\n\tconst exportClick = useCallback(() => {\n\t\t(myGrid.current as AUIGrid).exportToXlsx({ ...xlsxProps, progressBar: true });\n\t}, [myGrid, xlsxProps]);\n\n\tconst exportPdfClick = useCallback(() => {\n\t\t(myGrid.current as AUIGrid).exportToPdf({ ...pdfProps, fontPath: './fonts/nyjgothic-medium.ttf' });\n\t}, [myGrid, pdfProps]);\n\n\treturn (\n\t\t<div>\n\t\t\t<button onClick={exportClick}>엑셀(xlsx)로 저장</button>\n\t\t\t<button onClick={exportPdfClick}>PDF로 저장</button>\n\t\t</div>\n\t);\n};\n\nexport default ExportGridDataView;\n"
+  },
+  {
+    "name": "RendererTemplate",
+    "framework": "react-tsx",
+    "category": "samples",
+    "relPath": "samples\\RendererTemplate.tsx",
+    "content": "import { useEffect, useRef } from 'react';\nimport * as IGrid from 'aui-grid';\nimport AUIGrid from '../static/AUIGrid-React.tsx/AUIGridReact';\nimport { gridData, selectList, checkboxGroup } from './data/RendererTemplateData';\nimport { registerAUIGridTemplateHandler, unregisterAUIGridTemplateHandler } from './useAUIGridTemplateHandler';\nimport './RendererTemplate.css';\n\nconst columnLayout: IGrid.Column[] = [\n\t{\n\t\tdataField: 'name',\n\t\theaderText: 'Template-ButtonGroup',\n\t\twidth: 260,\n\t\trenderer: { type: IGrid.RendererKind.TemplateRenderer },\n\t\tlabelFunction: (rowIndex, _columnIndex, value) =>\n\t\t\t`<div class=\"my_div\">\n\t\t\t\t<span class=\"my_div_text_box\">${value}</span>\n\t\t\t\t<span class=\"my_div_btn\" onclick=\"myApplyBtnClick(${rowIndex}, event)\">적용</span>\n\t\t\t\t<span class=\"my_div_btn2\" onclick=\"myPopupBtnClick(${rowIndex}, event)\">팝업</span>\n\t\t\t</div>`.trim()\n\t},\n\t{\n\t\tdataField: 'code',\n\t\theaderText: 'Template-Select',\n\t\twidth: 280,\n\t\teditable: false,\n\t\trenderer: { type: IGrid.RendererKind.TemplateRenderer },\n\t\tlabelFunction: (rowIndex, _columnIndex, value) => {\n\t\t\tif (!value) return '';\n\t\t\tif (value === 'None') {\n\t\t\t\treturn `<div class=\"my_div\"><span style=\"line-height:2em;\">선택할 수 없도록 작성됨(즉, 동적 select 표현)</span></div>`.trim();\n\t\t\t}\n\t\t\tconst options = selectList\n\t\t\t\t.map(({ value: code, text }) => `<option value=\"${code}\"${code === value ? ' selected=\"selected\"' : ''}>${text}</option>`)\n\t\t\t\t.join('');\n\t\t\treturn `<div class=\"my_div\">\n\t\t\t\t<span class=\"my_div_code_span\">코드명 : ${value}</span>\n\t\t\t\t<select class=\"my_select\" onchange=\"mySelectChangeHandler(${rowIndex}, this.value, event);\">${options}</select>\n\t\t\t</div>`.trim();\n\t\t}\n\t},\n\t{\n\t\tdataField: 'check',\n\t\theaderText: 'Template-CheckGroup',\n\t\twidth: 180,\n\t\teditable: false,\n\t\trenderer: { type: IGrid.RendererKind.TemplateRenderer },\n\t\tlabelFunction: (rowIndex, _columnIndex, value) => {\n\t\t\tconst selectedValues = value.split(',');\n\t\t\tconst checkboxes = checkboxGroup\n\t\t\t\t.map(({ value: v, label }) => `<label><input type=\"checkbox\" value=\"${v}\" ${selectedValues.includes(v) ? 'checked=\"checked\"' : ''} onclick=\"myCheckClick(${rowIndex}, event);\">${label}</label>`)\n\t\t\t\t.join('');\n\t\t\treturn `<div class=\"my_div\"><span class=\"my_div_chk_span\">${checkboxes}</span></div>`.trim();\n\t\t}\n\t}\n];\n\nconst gridProps: IGrid.Props = {\n\twidth: '100%',\n\theight: 480,\n\trowHeight: 34,\n\teditable: true,\n\tshowStateColumn: true,\n\tselectionMode: 'multipleCells'\n};\n\nconst RendererTemplate = () => {\n\tconst myGrid = useRef<AUIGrid>(null);\n\n\tuseEffect(() => {\n\t\tconst grid = myGrid.current as AUIGrid;\n\t\tgrid.setGridData(gridData);\n\n\t\tconst myApplyBtnClick = (rowIndex: number, event: Event) => {\n\t\t\tgrid.updateRow({ name: '셀 값 예약어로 수정' }, rowIndex);\n\t\t\talert(`eventType : ${event.type}, rowIndex : ${rowIndex} 적용 버턴 클릭`);\n\t\t};\n\n\t\tconst myPopupBtnClick = (rowIndex: number) => {\n\t\t\talert('rowIndex : ' + rowIndex + ' 팝업 버턴 클릭');\n\t\t};\n\n\t\tconst mySelectChangeHandler = (rowIndex: number, selectedValue: any) => {\n\t\t\talert(selectedValue);\n\t\t\tgrid.updateRow({ code: selectedValue }, rowIndex);\n\t\t};\n\n\t\tconst myCheckClick = (rowIndex: number, event: Event) => {\n\t\t\tconst target = event.target as HTMLInputElement;\n\t\t\talert('rowIndex : ' + rowIndex + ', value : ' + target.value + ', checked : ' + target.checked);\n\n\t\t\tconst item = grid.getItemByRowIndex(rowIndex);\n\t\t\tconst checkArr = item.check.split(',');\n\t\t\tif (target.checked) {\n\t\t\t\tcheckArr.push(target.value);\n\t\t\t} else {\n\t\t\t\tcheckArr.splice(checkArr.indexOf(target.value), 1);\n\t\t\t}\n\t\t\tgrid.updateRow({ check: checkArr.join(',') }, rowIndex);\n\t\t};\n\n\t\tregisterAUIGridTemplateHandler('myApplyBtnClick', myApplyBtnClick);\n\t\tregisterAUIGridTemplateHandler('myPopupBtnClick', myPopupBtnClick);\n\t\tregisterAUIGridTemplateHandler('mySelectChangeHandler', mySelectChangeHandler);\n\t\tregisterAUIGridTemplateHandler('myCheckClick', myCheckClick);\n\n\t\treturn () => {\n\t\t\tunregisterAUIGridTemplateHandler('myApplyBtnClick');\n\t\t\tunregisterAUIGridTemplateHandler('myPopupBtnClick');\n\t\t\tunregisterAUIGridTemplateHandler('mySelectChangeHandler');\n\t\t\tunregisterAUIGridTemplateHandler('myCheckClick');\n\t\t};\n\t}, []);\n\n\treturn (\n\t\t<div>\n\t\t\t<div className=\"desc\">\n\t\t\t\t<p>데이터 값이 HTML 인 경우 그대로 출력하며, 사용자가 임의로 labelFunction 에서 HTML 스트링을 작성할 수 있습니다.(innerHTML 처리)</p>\n\t\t\t\t<strong>템플릿 렌더러에서 수정 가능한 태그를 어떻게 작성하는지를 보여주는 데모입니다.</strong>\n\t\t\t\t<p>템플릿 렌더러로 작성된 데이터 수정도 Undo(Ctrl+Z), Redo(Ctrl+Y) 를 지원합니다.</p>\n\t\t\t\t<p>HTML 템플릿은 행 높이를 벗어날 수 없습니다. 예를 들어 br 태그로 개행을 한다해도 지정된 행 높이를 벗어 날 수 없습니다.(그리드의 rowHeight 속성으로 높이를 크게 하십시오.)</p>\n\t\t\t\t<p>■ 단점 : 사용자가 HTML 템플릿을 작성하였기 때문에 엑셀 저장, 그룹핑, 필터링, 정렬 등에 제약을 받습니다. (dataField 값 기준으로 처리됩니다.)</p>\n\t\t\t</div>\n\t\t\t<AUIGrid ref={myGrid} columnLayout={columnLayout} gridProps={gridProps} />\n\t\t</div>\n\t);\n};\n\nexport default RendererTemplate;\n"
+  },
+  {
+    "name": "SampleDefault",
+    "framework": "react-tsx",
+    "category": "samples",
+    "relPath": "samples\\SampleDefault.tsx",
+    "content": "import { useEffect, useId, useRef } from 'react';\nimport * as IGrid from 'aui-grid';\nimport AUIGrid from '../static/AUIGrid-React.tsx/AUIGridReact';\nimport axios from 'axios';\nimport ExportGridDataView from './ExportGridDataView';\n\nconst PUBLIC_URL = process.env.PUBLIC_URL;\n\nconst numericEditRenderer: IGrid.Column['editRenderer'] = {\n\ttype: IGrid.EditRendererKind.InputEditRenderer,\n\tonlyNumeric: true,\n\ttextAlign: 'right',\n\tautoThousandSeparator: true\n};\n\nconst columnLayout: IGrid.Column[] = [\n\t{ dataField: 'id', headerText: 'ID', width: 120 },\n\t{ dataField: 'name', headerText: 'Name', width: 140 },\n\t{ dataField: 'country', headerText: 'Country', width: 140 },\n\t{\n\t\tdataField: 'flag',\n\t\theaderText: 'Flag IMG',\n\t\teditable: false,\n\t\tprefix: PUBLIC_URL + '/assets/',\n\t\trenderer: { type: IGrid.RendererKind.ImageRenderer, imgHeight: 24, altField: 'country' },\n\t\twidth: 100\n\t},\n\t{ dataField: 'product', headerText: 'Product', width: 140 },\n\t{ dataField: 'color', headerText: 'Color', width: 100 },\n\t{ dataField: 'price', headerText: 'Price', dataType: 'numeric', style: 'my-column', width: 120, editRenderer: numericEditRenderer },\n\t{ dataField: 'quantity', headerText: 'Quantity', dataType: 'numeric', style: 'my-column', width: 100, editRenderer: numericEditRenderer },\n\t{\n\t\tdataField: 'date',\n\t\theaderText: 'Date',\n\t\tdataType: 'date',\n\t\tdateInputFormat: 'yyyy-mm-dd',\n\t\tformatString: 'yyyy. mm. dd.',\n\t\teditRenderer: {\n\t\t\ttype: IGrid.EditRendererKind.CalendarRenderer,\n\t\t\tdefaultFormat: 'yyyy-mm-dd',\n\t\t\tshowEditorBtnOver: true,\n\t\t\tshowConfirmBtn: true\n\t\t}\n\t}\n];\n\nconst gridProps: IGrid.Props = {\n\twidth: '100%',\n\theight: 480,\n\teditable: true,\n\tenableCellMerge: true,\n\tenterKeyColumnBase: true,\n\tselectionMode: 'multipleCells',\n\tuseContextMenu: true,\n\tenableFilter: true,\n\tdisplayTreeOpen: true,\n\tnoDataMessage: '출력할 데이터가 없습니다.',\n\tgroupingMessage: '여기에 칼럼을 드래그하면 그룹핑이 됩니다.'\n};\n\nconst SampleDefault = () => {\n\tconst myGrid = useRef<AUIGrid>(null);\n\tconst uid = useId();\n\n\tuseEffect(() => {\n\t\tconst grid = myGrid.current as AUIGrid;\n\n\t\tgrid.bind(IGrid.EventKind.SelectionChange, (event: IGrid.SelectionChangeEvent) => {\n\t\t\tconsole.log(event);\n\t\t});\n\n\t\tgrid.bind(IGrid.EventKind.Ready, (event: IGrid.ReadyEvent) => {\n\t\t\tconsole.log(event);\n\t\t});\n\n\t\tgrid.bind([IGrid.EventKind.CellClick, IGrid.EventKind.HeaderClick], (event: IGrid.CellClickEvent | IGrid.HeaderClickEvent) => {\n\t\t\tswitch (event.type) {\n\t\t\t\tcase IGrid.EventKind.CellClick:\n\t\t\t\t\tconsole.log((event as IGrid.CellClickEvent).value);\n\t\t\t\t\tbreak;\n\t\t\t\tcase IGrid.EventKind.HeaderClick:\n\t\t\t\t\tconsole.log(event.headerText);\n\t\t\t\t\tbreak;\n\t\t\t}\n\t\t});\n\n\t\tgrid.bind(IGrid.EventKind.CellDoubleClick, (event: IGrid.CellDoubleClickEvent) => {\n\t\t\tconsole.log(event);\n\t\t});\n\n\t\tgrid.showAjaxLoader();\n\t\taxios.get('./data/normal_100.json').then((result) => {\n\t\t\tgrid.setGridData(result.data);\n\t\t\tgrid.removeAjaxLoader();\n\t\t});\n\t}, []);\n\n\treturn (\n\t\t<div>\n\t\t\t<div className=\"desc\">\n\t\t\t\t<ExportGridDataView myGrid={myGrid} />\n\t\t\t</div>\n\t\t\t<AUIGrid ref={myGrid} name={uid} columnLayout={columnLayout} gridProps={gridProps} />\n\t\t</div>\n\t);\n};\n\nexport default SampleDefault;\n"
+  },
+  {
+    "name": "SampleTreeGrid",
+    "framework": "react-tsx",
+    "category": "samples",
+    "relPath": "samples\\SampleTreeGrid.tsx",
+    "content": "import { useCallback, useEffect, useMemo, useRef } from 'react';\nimport * as IGrid from 'aui-grid';\nimport AUIGrid from '../static/AUIGrid-React.tsx/AUIGridReact';\nimport ExportGridDataView from './ExportGridDataView';\nimport data from './data/TreeGridFlatData';\n\nconst gridProps: IGrid.Props = {\n\twidth: '100%',\n\theight: 480,\n\tselectionMode: 'singleRow',\n\tdisplayTreeOpen: true,\n\teditable: true,\n\tflat2tree: true,\n\trowIdField: 'rowId',\n\ttreeIdField: 'id',\n\ttreeIdRefField: 'parent'\n};\n\nconst SampleTreeGrid = () => {\n\tconst myGrid = useRef<AUIGrid>(null);\n\tconst isExpanded = useRef(true);\n\n\tconst columnLayout = useMemo<IGrid.Column[]>(() => [\n\t\t{\n\t\t\tdataField: 'id',\n\t\t\theaderText: 'Task ID',\n\t\t\twidth: 120,\n\t\t\teditRenderer: {\n\t\t\t\ttype: IGrid.EditRendererKind.InputEditRenderer,\n\t\t\t\tvalidator: (oldValue, newValue, _rowItem, dataField) => {\n\t\t\t\t\tif (oldValue === newValue) return;\n\t\t\t\t\tconst isValid = (myGrid.current as AUIGrid).isUniqueValue(dataField, newValue);\n\t\t\t\t\treturn { validate: isValid, message: `${newValue} 값은 고유값이 아닙니다. 다른 값을 입력해 주십시오.` };\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t\t{ dataField: 'name', headerText: 'Task Name', style: 'my-left-column' }\n\t], []);\n\n\tuseEffect(() => {\n\t\tconst grid = myGrid.current as AUIGrid;\n\n\t\tgrid.bind(IGrid.EventKind.Ready, (event: IGrid.ReadyEvent) => {\n\t\t\tconsole.log(event);\n\t\t});\n\n\t\tgrid.bind(IGrid.EventKind.CellClick, (event: IGrid.CellClickEvent) => {\n\t\t\tconsole.log(event.value);\n\t\t});\n\n\t\tgrid.setGridData(data);\n\t}, []);\n\n\tconst expand = useCallback(() => {\n\t\tconst grid = myGrid.current as AUIGrid;\n\t\tisExpanded.current ? grid.collapseAll() : grid.expandAll();\n\t\tisExpanded.current = !isExpanded.current;\n\t}, []);\n\n\tconst expandItem = useCallback(() => {\n\t\tconst grid = myGrid.current as AUIGrid;\n\t\tgrid.expandItemByRowId('r6', !grid.isItemOpenByRowId('r6'));\n\t}, []);\n\n\treturn (\n\t\t<div>\n\t\t\t<div className=\"desc\">\n\t\t\t\t<p>기본적으로 트리 그리드는 계층 데이터로 구성된 데이터를 출력합니다. 즉, 서버에서 데이터 작성 시 데이터 구조를 계층적으로 작성해야 합니다.</p>\n\t\t\t\t<p>그러나 일반 배열 형식의 데이터를 다음과 같이 id 와 parent 를 지시하면 그리드가 계층구조로 출력합니다.</p>\n\t\t\t\t<p>{`{\"id\": \"1\", \"name\": \"Phase 1 - Strategic Plan\"},`}</p>\n\t\t\t\t<p>{`{\"id\": \"2\", \"name\": \"Self-Assessment\", \"parent\":\"1\"},`}</p>\n\t\t\t\t<p>{`{\"id\": \"3\", \"name\": \"Define business vision\", \"parent\":\"2\"}`}</p>\n\t\t\t\t<p>id 와 parent 필드는 각각 treeIdField, treeIdRefField 속성으로 설정하십시오.</p>\n\t\t\t\t<button onClick={expand}>모두 열기/ 닫기</button>\n\t\t\t\t<button onClick={expandItem}>특정 브랜치(ID = \"r6\") 열기/닫기</button>\n\t\t\t\t<ExportGridDataView myGrid={myGrid} />\n\t\t\t</div>\n\t\t\t<AUIGrid ref={myGrid} columnLayout={columnLayout} gridProps={gridProps} />\n\t\t</div>\n\t);\n};\n\nexport default SampleTreeGrid;\n"
+  },
+  {
+    "name": "Styling",
+    "framework": "react-tsx",
+    "category": "samples",
+    "relPath": "samples\\Styling.tsx",
+    "content": "import { useCallback, useEffect, useRef } from 'react';\nimport * as IGrid from 'aui-grid';\nimport AUIGrid from '../static/AUIGrid-React.tsx/AUIGridReact';\nimport axios from 'axios';\nimport ExportGridDataView from './ExportGridDataView';\nimport './Styling.css';\n\nconst columnLayout: IGrid.Column[] = [\n\t{ dataField: 'orderId', headerText: 'Order ID', width: 140 },\n\t{ dataField: 'country', headerText: 'Country', style: 'my-column-style2' },\n\t{ dataField: 'name', headerText: 'Name' },\n\t{\n\t\tdataField: 'product',\n\t\theaderText: 'Product',\n\t\tstyle: 'my-column-style',\n\t\tstyleFunction: (_rowIndex, _columnIndex, value) => {\n\t\t\tif (value === 'Galaxy S25') return 'my-cell-style';\n\t\t}\n\t},\n\t{ dataField: 'price', headerText: 'Price', dataType: 'numeric', style: 'my-right-column' },\n\t{ dataField: 'phone', headerText: 'Phone' },\n\t{ dataField: 'date', headerText: 'Date' }\n];\n\nconst footerLayout: IGrid.Footer[] = [\n\t{ dataField: 'price', positionField: 'price', operation: 'SUM', formatString: '#,##0', style: 'aui-grid-my-footer-sum-total2' },\n\t{ dataField: 'price', positionField: 'date', operation: 'COUNT', style: 'aui-grid-my-footer-sum-total2' },\n\t{ labelText: 'Count=>', positionField: 'phone', style: 'aui-grid-my-footer-sum-total2' }\n];\n\nconst gridProps: IGrid.Props = {\n\twidth: '100%',\n\theight: 480,\n\tshowFooter: true,\n\teditable: true,\n\tshowRowNumColumn: true,\n\tshowRowCheckColumn: true,\n\tdisplayTreeOpen: true,\n\tselectionMode: 'multipleCells',\n\tuseGroupingPanel: true,\n\trowStyleFunction: (_rowIndex, item) => {\n\t\tif (item.country === 'USA') return 'my-row-style';\n\t}\n};\n\nconst Styling = () => {\n\tconst myGrid = useRef<AUIGrid>(null);\n\n\tuseEffect(() => {\n\t\tconst grid = myGrid.current as AUIGrid;\n\t\tgrid.showAjaxLoader();\n\t\taxios.get('./data/country_phone_500.json').then((result) => {\n\t\t\tgrid.setGridData(result.data);\n\t\t\tgrid.removeAjaxLoader();\n\t\t});\n\t}, []);\n\n\tconst changeRowStyleFunction = useCallback(() => {\n\t\tconst grid = myGrid.current as AUIGrid;\n\t\tgrid.setProp('rowStyleFunction', (_rowIndex: number, item: any) => {\n\t\t\tif (item.country === 'UK') return 'my-row-style';\n\t\t});\n\t\tgrid.update();\n\t}, []);\n\n\treturn (\n\t\t<div>\n\t\t\t<div className=\"desc\">\n\t\t\t\t<p>특정 조건에 따라 동적으로 스타일을 정의합니다.</p>\n\t\t\t\t<p>\n\t\t\t\t\t행(row) 스타일링 : <span className=\"my-row-style\"> Country = USA 인 경우 행에 스타일링</span>\n\t\t\t\t</p>\n\t\t\t\t<p>\n\t\t\t\t\t셀 스타일링 : <span className=\"my-cell-style\">Product = Galaxy S25 인 셀에 스타일링</span>\n\t\t\t\t</p>\n\t\t\t\t<button onClick={changeRowStyleFunction}>행 스타일링을 변경하기 ( Country 가 UK 인 행 스타일링 하기 )</button>\n\t\t\t\t<ExportGridDataView myGrid={myGrid} />\n\t\t\t</div>\n\t\t\t<AUIGrid ref={myGrid} columnLayout={columnLayout} gridProps={gridProps} footerLayout={footerLayout} />\n\t\t</div>\n\t);\n};\n\nexport default Styling;\n"
+  },
+  {
+    "name": "useAUIGridTemplateHandler",
+    "framework": "react-tsx",
+    "category": "samples",
+    "relPath": "samples\\useAUIGridTemplateHandler.ts",
+    "content": "// useAUIGridTemplateHandler.ts\r\n\r\ntype GlobalHandler = (...args: any[]) => void;\r\n\r\n/**\r\n * AUIGrid TemplateRenderer에서 사용할 함수를 전역에 등록합니다.\r\n * @param name 전역 함수 이름 (예: \"myApplyBtnClick\")\r\n * @param handlerFn 실제 핸들러 함수\r\n */\r\nexport function registerAUIGridTemplateHandler(name: string, handlerFn: GlobalHandler): void {\r\n\tif (typeof handlerFn !== 'function') {\r\n\t\tconsole.warn(`[AUIGrid] '${name}' 등록 실패: handlerFn은 함수가 아닙니다.`);\r\n\t\treturn;\r\n\t}\r\n\r\n\tif (typeof window === 'undefined') {\r\n\t\tconsole.error(`[AUIGrid] '${name}' 등록 실패: window 객체가 존재하지 않습니다.`);\r\n\t\treturn;\r\n\t}\r\n\r\n\tObject.defineProperty(window, name, {\r\n\t\tvalue: (...args: any[]) => {\r\n\t\t\ttry {\r\n\t\t\t\thandlerFn(...args);\r\n\t\t\t} catch (e) {\r\n\t\t\t\tconsole.error(`[AUIGrid] '${name}' 실행 중 오류:`, e);\r\n\t\t\t}\r\n\t\t},\r\n\t\twritable: true,\r\n\t\tconfigurable: true\r\n\t});\r\n}\r\n\r\n/**\r\n * 등록된 AUIGrid TemplateRenderer 전역 함수를 해제합니다.\r\n * @param name 해제할 함수 이름\r\n */\r\nexport function unregisterAUIGridTemplateHandler(name: string): void {\r\n\tif (typeof window !== 'undefined' && Object.prototype.hasOwnProperty.call(window, name)) {\r\n\t\tdelete (window as any)[name];\r\n\t}\r\n}\r\n"
+  },
+  {
+    "name": "Showcase01",
+    "framework": "react-tsx",
+    "category": "showcases",
+    "relPath": "showcases\\Showcase01.tsx",
+    "content": "import { useCallback, useEffect, useRef } from 'react';\nimport * as IGrid from 'aui-grid';\nimport AUIGrid from '../static/AUIGrid-React.tsx/AUIGridReact';\nimport axios from 'axios';\nimport ExportGridDataView from '../samples/ExportGridDataView';\nimport './Showcase01.css';\n\nconst myExpFunction = (_rowIndex: number, _columnIndex: number, item: any, dataField: string): number => {\n\tlet count = 0;\n\n\tif (dataField === 'ceu') {\n\t\tfor (const field in item) {\n\t\t\tconst value: string = item[field];\n\t\t\tif (value === 'E' || value === 'U') count++;\n\t\t}\n\t\treturn count;\n\t}\n\n\tconst opMap: Record<string, string> = { ct: 'T', ce: 'E', cu: 'U', cp: 'P' };\n\tconst opValue = opMap[dataField] ?? '';\n\tfor (const field in item) {\n\t\tif (item[field] === opValue) count++;\n\t}\n\treturn count;\n};\n\nconst cellStyleFunction = (_rowIndex: number, _columnIndex: number, value: any): string | null => {\n\tconst styleMap: Record<string, string> = {\n\t\tN: 'mycustom-n',\n\t\tT: 'mycustom-t',\n\t\tU: 'mycustom-u',\n\t\tE: 'mycustom-e',\n\t\tP: 'mycustom-p'\n\t};\n\treturn styleMap[value] ?? null;\n};\n\nconst columnLayout: IGrid.Column[] = (() => {\n\tconst days = ['일', '월', '화', '수', '목', '금', '토'];\n\tconst layout: IGrid.Column[] = [\n\t\t{\n\t\t\tdataField: 'name',\n\t\t\theaderText: '학생이름',\n\t\t\tfilter: { showIcon: true, useExMenu: true }\n\t\t},\n\t\t{\n\t\t\theaderText: '합 계',\n\t\t\tchildren: [\n\t\t\t\t{ dataField: 'ct', expFunction: myExpFunction, editable: false, headerText: 'T', width: 40, headerStyle: 'mycustom-t', dataType: 'numeric', headerTooltip: { show: true, tooltipHtml: '지각' } },\n\t\t\t\t{ dataField: 'ce', expFunction: myExpFunction, editable: false, headerText: 'E', width: 40, headerStyle: 'mycustom-e', dataType: 'numeric', headerTooltip: { show: true, tooltipHtml: '사정 상 결석' } },\n\t\t\t\t{ dataField: 'cu', expFunction: myExpFunction, editable: false, headerText: 'U', width: 40, headerStyle: 'mycustom-u', dataType: 'numeric', headerTooltip: { show: true, tooltipHtml: '무단 결석' } },\n\t\t\t\t{ dataField: 'cp', expFunction: myExpFunction, editable: false, headerText: 'P', width: 40, headerStyle: 'mycustom-p', dataType: 'numeric', headerTooltip: { show: true, tooltipHtml: '출석' } },\n\t\t\t\t{ dataField: 'ceu', expFunction: myExpFunction, editable: false, headerText: '결석 일수', width: 100, dataType: 'numeric', renderer: { type: IGrid.RendererKind.BarRenderer, max: 10, style: 'showcase1-custmom-bar' } }\n\t\t\t]\n\t\t}\n\t];\n\n\tfor (let i = 1; i <= 31; i++) {\n\t\tlayout.push({\n\t\t\theaderText: days[i % 7],\n\t\t\tchildren: [{ dataField: 'd' + i, headerText: String(i), width: 40, styleFunction: cellStyleFunction }]\n\t\t});\n\t}\n\treturn layout;\n})();\n\nconst gridProps: IGrid.Props = {\n\teditable: true,\n\twidth: '100%',\n\theight: 480,\n\tselectionMode: 'multipleCells'\n};\n\nconst Showcase01 = () => {\n\tconst myGrid = useRef<AUIGrid>(null);\n\n\tuseEffect(() => {\n\t\tconst grid = myGrid.current as AUIGrid;\n\n\t\tgrid.bind([IGrid.EventKind.CellClick, IGrid.EventKind.HeaderClick], (event: IGrid.CellClickEvent | IGrid.HeaderClickEvent) => {\n\t\t\tswitch (event.type) {\n\t\t\t\tcase IGrid.EventKind.CellClick:\n\t\t\t\t\tconsole.log(event.type, (event as IGrid.CellClickEvent).value);\n\t\t\t\t\tbreak;\n\t\t\t\tcase IGrid.EventKind.HeaderClick:\n\t\t\t\t\tconsole.log(event.type, event.headerText);\n\t\t\t\t\tbreak;\n\t\t\t}\n\t\t});\n\n\t\tgrid.bind(IGrid.EventKind.AddRowFinish, () => {\n\t\t\tconst selected = grid.getSelectedIndex();\n\t\t\tif (selected.length <= 0) return;\n\n\t\t\tconst rowIndex = selected[0];\n\t\t\tconst colIndex = grid.getColumnIndexByDataField('name');\n\t\t\tgrid.setSelectionByIndex(rowIndex, colIndex);\n\t\t\tsetTimeout(() => grid.openInputer(), 16);\n\t\t});\n\n\t\tgrid.bind([IGrid.EventKind.CellEditEndBefore, IGrid.EventKind.CellEditCancel], (event: any) => {\n\t\t\tswitch (event.type) {\n\t\t\t\tcase IGrid.EventKind.CellEditEndBefore: {\n\t\t\t\t\tconst endEvent = event as IGrid.CellEditEndEvent;\n\t\t\t\t\tif (endEvent.dataField === 'name') {\n\t\t\t\t\t\tconsole.log('oldValue :', endEvent.oldValue, ', new Value :', endEvent.value);\n\t\t\t\t\t\treturn endEvent.value;\n\t\t\t\t\t}\n\t\t\t\t\tif (!endEvent.value) return endEvent.oldValue;\n\t\t\t\t\tconst value = endEvent.value.toUpperCase();\n\t\t\t\t\tconst validValues = ['T', 'E', 'U', 'P', 'N'];\n\t\t\t\t\tif (!validValues.includes(value)) {\n\t\t\t\t\t\tconsole.log('T, E, U, P, N 입력이 아님으로 에디팅 취소시킴');\n\t\t\t\t\t\treturn endEvent.oldValue;\n\t\t\t\t\t}\n\t\t\t\t\tconsole.log('oldValue :', endEvent.oldValue, ', new Value :', value, '(대문자로 변경됨)');\n\t\t\t\t\treturn value;\n\t\t\t\t}\n\t\t\t\tcase IGrid.EventKind.CellEditCancel: {\n\t\t\t\t\tconst cancelEvent = event as IGrid.CellEditCancelEvent;\n\t\t\t\t\tif (cancelEvent.dataField === 'name' && cancelEvent.item.name === '') {\n\t\t\t\t\t\tsetTimeout(() => grid.removeRow(cancelEvent.rowIndex), 16);\n\t\t\t\t\t}\n\t\t\t\t\tbreak;\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\n\t\tgrid.showAjaxLoader();\n\t\taxios.get('./data/student_present.json').then((result) => {\n\t\t\tgrid.setGridData(result.data);\n\t\t\tgrid.removeAjaxLoader();\n\t\t});\n\t}, []);\n\n\tconst addRow = useCallback(() => {\n\t\tconst grid = myGrid.current as AUIGrid;\n\t\tgrid.forceEditingComplete(null);\n\n\t\tconst holidays = [6, 7, 13, 14];\n\t\tconst item: any = { name: '' };\n\t\tfor (let i = 1; i <= 31; i++) {\n\t\t\titem['d' + i] = holidays.includes(i) ? 'N' : 'P';\n\t\t}\n\t\tgrid.addRow(item, 'last');\n\t}, []);\n\n\tconst removeRow = useCallback(() => {\n\t\t(myGrid.current as AUIGrid).removeRow('selectedIndex');\n\t}, []);\n\n\tconst restoreSoftRow = useCallback(() => {\n\t\t(myGrid.current as AUIGrid).restoreSoftRows('selectedIndex');\n\t}, []);\n\n\tconst removeSoftRows = useCallback(() => {\n\t\tconst grid = myGrid.current as AUIGrid;\n\t\tconst removedRows = grid.getRemovedItems(true);\n\t\tif (removedRows.length <= 0) {\n\t\t\talert('삭제 처리되어 마크된 행이 없습니다.');\n\t\t\treturn;\n\t\t}\n\t\tif (window.confirm('다시 복구 할 수 없습니다. 삭제 하시겠습니까?')) {\n\t\t\tgrid.removeSoftRows();\n\t\t}\n\t}, []);\n\n\treturn (\n\t\t<div>\n\t\t\t<div className=\"desc\">\n\t\t\t\t<ExportGridDataView myGrid={myGrid} xlsxProps={{ fileName: '쇼케이스-01' }} pdfProps={{ fileName: '쇼케이스-01' }} />\n\t\t\t\t<p>학생 출석 레코드를 표현 할 때 각각의 셀에 스타일을 적용시킨 것입니다.</p>\n\t\t\t\t<div>\n\t\t\t\t\t<span className=\"legend mycustom-t\">T</span>\n\t\t\t\t\t<span>지각</span>\n\t\t\t\t\t<span className=\"legend mycustom-e\">E</span>\n\t\t\t\t\t<span>유고</span>\n\t\t\t\t\t<span className=\"legend mycustom-u\">U</span>\n\t\t\t\t\t<span>무단</span>\n\t\t\t\t\t<span className=\"legend mycustom-p\">P</span>\n\t\t\t\t\t<span>출석</span>\n\t\t\t\t\t<span className=\"legend mycustom-n\">N</span>\n\t\t\t\t\t<span>휴교</span>\n\t\t\t\t</div>\n\t\t\t\t<p>날짜의 값(T, E, U, P, N) 수정 시 동적으로 합계가 변경됩니다.</p>\n\t\t\t\t<div>\n\t\t\t\t\t<div>\n\t\t\t\t\t\t<button onClick={addRow}>학생 추가</button>\n\t\t\t\t\t\t<button onClick={removeRow}>선택 삭제</button>\n\t\t\t\t\t\t<button onClick={restoreSoftRow}>삭제 취소</button>\n\t\t\t\t\t\t<button onClick={removeSoftRows}>삭제 처리된 행들 완전 삭제</button>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<p>(삭제 시 softRemoveRowMode = true 설정으로 바로 그리드에서 제거하지 않음.)</p>\n\t\t\t</div>\n\t\t\t<AUIGrid ref={myGrid} columnLayout={columnLayout} gridProps={gridProps} />\n\t\t</div>\n\t);\n};\n\nexport default Showcase01;\n"
+  },
+  {
+    "name": "Showcase02",
+    "framework": "react-tsx",
+    "category": "showcases",
+    "relPath": "showcases\\Showcase02.tsx",
+    "content": "import { useCallback, useEffect, useMemo, useRef } from 'react';\nimport * as IGrid from 'aui-grid';\nimport AUIGrid from '../static/AUIGrid-React.tsx/AUIGridReact';\nimport axios from 'axios';\nimport ExportGridDataView from '../samples/ExportGridDataView';\nimport './Showcase02.css';\nimport iconMan from '../assets/office_man.png';\nimport iconFemale from '../assets/office_female.png';\nimport iconDate from '../assets/calendar-icon.png';\n\nconst listItems: { text: string; value: number }[] = [\n\t{ text: '계층 1 Depth 만 보이기', value: 1 },\n\t{ text: '계층 2 Depth 만 보이기', value: 2 },\n\t{ text: '계층 3 Depth 만 보이기', value: 3 }\n];\n\nconst gridProps: IGrid.Props = {\n\twidth: '100%',\n\theight: 480,\n\tselectionMode: 'singleRow',\n\teditable: true,\n\tenableFilter: true,\n\tshowStateColumn: true,\n\ttreeColumnIndex: 1,\n\tdisplayTreeOpen: true,\n\tshowRowCheckColumn: false,\n\tshowRowNumColumn: false\n};\n\nconst calendarEditRenderer: IGrid.Column['editRenderer'] = {\n\ttype: IGrid.EditRendererKind.CalendarRenderer,\n\tshowEditorBtn: false,\n\tonlyCalendar: true,\n\ttitles: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],\n\tmonthTitleString: 'mmm',\n\tformatMonthString: 'mmm yyyy',\n\tformatYearString: 'yyyy',\n\tshowExtraDays: true,\n\tshowTodayBtn: true,\n\ttodayText: 'Today'\n};\n\nconst Showcase02 = () => {\n\tconst isExpanded = useRef(true);\n\tconst myGrid = useRef<AUIGrid>(null);\n\n\tconst columnLayout = useMemo<IGrid.Column[]>(() => [\n\t\t{\n\t\t\tdataField: 'id',\n\t\t\theaderText: 'ID',\n\t\t\twidth: 50\n\t\t},\n\t\t{\n\t\t\tdataField: 'name',\n\t\t\theaderText: 'Task Name',\n\t\t\tfilter: { showIcon: true },\n\t\t\theaderTooltip: {\n\t\t\t\tshow: true,\n\t\t\t\ttooltipHtml: '<div style=\"width:180px;text-align:left;\"><p>Just an incredibly simple <span style=\"color:#F29661;\">AUIGrid</span></p><p>Faucibus sed lobortis aliquam lorem blandit. Lorem eu nunc metus col. Commodo id in arcu ante lorem ipsum sed accumsan erat praesent faucibus commodo ac mi lacus. Adipiscing mi ac commodo. </p></div>' // eslint-disable-line\n\t\t\t},\n\t\t\tstyle: 'showcase2-my-left-text',\n\t\t\twidth: 400\n\t\t},\n\t\t{\n\t\t\tdataField: 'charge',\n\t\t\theaderText: 'Charge',\n\t\t\tfilter: { showIcon: true },\n\t\t\theaderTooltip: {\n\t\t\t\tshow: true,\n\t\t\t\ttooltipHtml: '<div style=\"width:120px;text-align:left;\"><p>Things I Can Do</p><p> Integer eu ante ornare amet commetus vestibulum blandit integer in curae ac faucibus integer non. Adipiscing cubilia elementum integer lorem ipsum dolor sit amet.</p></div>' // eslint-disable-line\n\t\t\t},\n\t\t\tstyle: 'showcase2-my-left-text',\n\t\t\twidth: 120,\n\t\t\trenderer: {\n\t\t\t\ttype: IGrid.RendererKind.IconRenderer,\n\t\t\t\ticonWidth: 20,\n\t\t\t\ticonHeight: 20,\n\t\t\t\ticonFunction: (_rowIndex, _columnIndex, value) => {\n\t\t\t\t\tif (value && value.substr(0, 1) === 'A') return iconFemale;\n\t\t\t\t\treturn iconMan;\n\t\t\t\t}\n\t\t\t},\n\t\t\teditRenderer: {\n\t\t\t\ttype: IGrid.EditRendererKind.ComboBoxRenderer,\n\t\t\t\tshowEditorBtnOver: true,\n\t\t\t\thistoryMode: true,\n\t\t\t\tlistAlign: 'left'\n\t\t\t}\n\t\t},\n\t\t{\n\t\t\tdataField: 'complete',\n\t\t\theaderText: 'Complete(%)',\n\t\t\twidth: 100,\n\t\t\tdataType: 'numeric',\n\t\t\trenderer: { type: IGrid.RendererKind.BarRenderer, min: 0, max: 100 },\n\t\t\teditRenderer: { type: IGrid.EditRendererKind.NumberStepRenderer, min: 0, max: 100, step: 1 },\n\t\t\tstyleFunction: (_rowIndex, _columnIndex, value) => (value === 100 ? 'showcase2-complete-red' : '')\n\t\t},\n\t\t{\n\t\t\tdataField: 'start',\n\t\t\theaderText: 'Start Date',\n\t\t\tformatString: 'mm/dd/yyyy',\n\t\t\tdataType: 'date',\n\t\t\twidth: 120,\n\t\t\trenderer: {\n\t\t\t\ttype: IGrid.RendererKind.IconRenderer,\n\t\t\t\ticonWidth: 16,\n\t\t\t\ticonHeight: 16,\n\t\t\t\ticonPosition: 'aisleRight',\n\t\t\t\ticonTableRef: { default: iconDate },\n\t\t\t\tonClick: () => myGrid.current?.openInputer()\n\t\t\t},\n\t\t\teditRenderer: calendarEditRenderer\n\t\t},\n\t\t{\n\t\t\tdataField: 'end',\n\t\t\theaderText: 'End Date',\n\t\t\tformatString: 'mm/dd/yyyy',\n\t\t\tdataType: 'date',\n\t\t\twidth: 120,\n\t\t\trenderer: {\n\t\t\t\ttype: IGrid.RendererKind.IconRenderer,\n\t\t\t\ticonWidth: 16,\n\t\t\t\ticonHeight: 16,\n\t\t\t\ticonPosition: 'aisleRight',\n\t\t\t\ticonTableRef: { default: iconDate },\n\t\t\t\tonClick: () => myGrid.current?.openInputer()\n\t\t\t},\n\t\t\teditRenderer: calendarEditRenderer\n\t\t},\n\t\t{\n\t\t\tdataField: 'issue',\n\t\t\theaderText: 'Issues',\n\t\t\tstyle: 'showcase2-my-left-text'\n\t\t}\n\t], []);\n\n\tuseEffect(() => {\n\t\tconst grid = myGrid.current as AUIGrid;\n\t\tgrid.showAjaxLoader();\n\t\taxios.get('./data/schedule_tree.json').then((result) => {\n\t\t\tgrid.setGridData(result.data);\n\t\t\tgrid.removeAjaxLoader();\n\t\t});\n\t}, []);\n\n\tconst handleSelect = useCallback((e: React.ChangeEvent<HTMLSelectElement>) => {\n\t\tmyGrid.current?.showItemsOnDepth(Number(e.target.value));\n\t}, []);\n\n\tconst handleExpandBtnClick = useCallback(() => {\n\t\tconst grid = myGrid.current as AUIGrid;\n\t\tisExpanded.current ? grid.collapseAll() : grid.expandAll();\n\t\tisExpanded.current = !isExpanded.current;\n\t}, []);\n\n\treturn (\n\t\t<div>\n\t\t\t<div className=\"desc\">\n\t\t\t\t<ExportGridDataView myGrid={myGrid} xlsxProps={{ fileName: '쇼케이스-02' }} pdfProps={{ fileName: '쇼케이스-02' }} />\n\t\t\t\t<p>프로젝트 일정 관리 테이블을 출력한 모습입니다. ( 계층구조 데이터 표현 )</p>\n\t\t\t\t<div>\n\t\t\t\t\t<button onClick={handleExpandBtnClick}>모두 열기/닫기</button>\n\t\t\t\t\t<select onChange={handleSelect} defaultValue=\"0\">\n\t\t\t\t\t\t<option value=\"0\" disabled={true}>\n\t\t\t\t\t\t\t-- 특정 계층까지만 보이기 --\n\t\t\t\t\t\t</option>\n\t\t\t\t\t\t{listItems.map(({ text, value }) => (\n\t\t\t\t\t\t\t<option value={value} key={value}>\n\t\t\t\t\t\t\t\t{text}\n\t\t\t\t\t\t\t</option>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</select>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<AUIGrid ref={myGrid} columnLayout={columnLayout} gridProps={gridProps} />\n\t\t</div>\n\t);\n};\n\nexport default Showcase02;\n"
+  },
+  {
+    "name": "Showcase03",
+    "framework": "react-tsx",
+    "category": "showcases",
+    "relPath": "showcases\\Showcase03.tsx",
+    "content": "import { useEffect, useRef } from 'react';\nimport * as IGrid from 'aui-grid';\nimport AUIGrid, { agUtils } from '../static/AUIGrid-React.tsx/AUIGridReact';\nimport axios from 'axios';\nimport ExportGridDataView from '../samples/ExportGridDataView';\nimport './Showcase03.css';\n\nconst columnLayout: IGrid.Column[] = [\n\t{\n\t\tdataField: 'title',\n\t\theaderText: ' ',\n\t\twidth: 280\n\t},\n\t{\n\t\tdataField: 'm1,m2,m3,m4,m5,m6,m7,m8,m9,m10,m11,m12',\n\t\theaderText: '추 세',\n\t\theaderTooltip: {\n\t\t\tshow: true,\n\t\t\ttooltipHtml: '합계 행에 대하여 1월에서 12월 간 추세를 나타냅니다.'\n\t\t},\n\t\trenderer: {\n\t\t\ttype: IGrid.RendererKind.SparkLineRenderer,\n\t\t\trenderingField: '_isMySum'\n\t\t},\n\t\twidth: 120\n\t},\n\t{\n\t\theaderText: '2014 상반기',\n\t\tchildren: [\n\t\t\t{ dataField: 'm1', headerText: '1월', width: 60, dataType: 'numeric', formatString: '#,##0', style: 'showcase3-my-column-text-right' },\n\t\t\t{ dataField: 'm2', headerText: '2월', width: 60, dataType: 'numeric', formatString: '#,##0', style: 'showcase3-my-column-text-right' },\n\t\t\t{ dataField: 'm3', headerText: '3월', width: 60, dataType: 'numeric', formatString: '#,##0', style: 'showcase3-my-column-text-right' },\n\t\t\t{ dataField: 'm4', headerText: '4월', width: 60, dataType: 'numeric', formatString: '#,##0', style: 'showcase3-my-column-text-right' },\n\t\t\t{ dataField: 'm5', headerText: '5월', width: 60, dataType: 'numeric', formatString: '#,##0', style: 'showcase3-my-column-text-right' },\n\t\t\t{ dataField: 'm6', headerText: '6월', width: 60, dataType: 'numeric', formatString: '#,##0', style: 'showcase3-my-column-text-right' }\n\t\t]\n\t},\n\t{\n\t\theaderText: '2014 하반기',\n\t\tchildren: [\n\t\t\t{ dataField: 'm7', headerText: '7월', width: 60, dataType: 'numeric', formatString: '#,##0', style: 'showcase3-my-column-text-right' },\n\t\t\t{ dataField: 'm8', headerText: '8월', width: 60, dataType: 'numeric', formatString: '#,##0', style: 'showcase3-my-column-text-right' },\n\t\t\t{ dataField: 'm9', headerText: '9월', width: 60, dataType: 'numeric', formatString: '#,##0', style: 'showcase3-my-column-text-right' },\n\t\t\t{ dataField: 'm10', headerText: '10월', width: 60, dataType: 'numeric', formatString: '#,##0', style: 'showcase3-my-column-text-right' },\n\t\t\t{ dataField: 'm11', headerText: '11월', width: 60, dataType: 'numeric', formatString: '#,##0', style: 'showcase3-my-column-text-right' },\n\t\t\t{ dataField: 'm12', headerText: '12월', width: 60, dataType: 'numeric', formatString: '#,##0', style: 'showcase3-my-column-text-right' }\n\t\t]\n\t},\n\t{\n\t\theaderText: '합계',\n\t\tdataField: 'mySumCol',\n\t\tdataType: 'numeric',\n\t\tstyle: 'showcase3-strong-cells',\n\t\txlsxTextConversion: true,\n\t\tlabelFunction: (_rowIndex, _columnIndex, _labelText, _headerText, item) => {\n\t\t\tif (item._$isBranch) return '';\n\t\t\tlet sum = 0;\n\t\t\tfor (let i = 1; i <= 12; i++) {\n\t\t\t\tconst val = Number(item['m' + i]);\n\t\t\t\tif (!isNaN(val)) sum += val;\n\t\t\t}\n\t\t\treturn isNaN(sum) ? '' : agUtils.formatNumber(sum, '#,##0.00');\n\t\t}\n\t}\n];\n\nconst gridProps: IGrid.Props = {\n\twidth: '100%',\n\theight: 480,\n\tenableFilter: true,\n\tuseContextMenu: true,\n\tfixedColumnCount: 1,\n\tfixedRowCount: 2,\n\tdisplayTreeOpen: true,\n\tshowRowCheckColumn: false,\n\tshowRowNumColumn: false,\n\trowStyleFunction: (_rowIndex, item) => {\n\t\tif (!item._isMySum) return null;\n\t\tswitch (item._$depth) {\n\t\t\tcase 1: return 'aui-grid-row-depth1-style';\n\t\t\tcase 2: return 'aui-grid-row-depth2-style';\n\t\t\tcase 3: return 'aui-grid-row-depth3-style';\n\t\t\tdefault: return 'aui-grid-row-depth-default-style';\n\t\t}\n\t}\n};\n\nconst Showcase03 = () => {\n\tconst myGrid = useRef<AUIGrid>(null);\n\n\tuseEffect(() => {\n\t\tconst grid = myGrid.current as AUIGrid;\n\t\tgrid.showAjaxLoader();\n\t\taxios.get('./data/chanel_marketing.json').then((result) => {\n\t\t\tgrid.setGridData(result.data);\n\t\t\tgrid.removeAjaxLoader();\n\t\t});\n\t}, []);\n\n\treturn (\n\t\t<div>\n\t\t\t<div className=\"desc\">\n\t\t\t\t<ExportGridDataView myGrid={myGrid} xlsxProps={{ fileName: '쇼케이스-03', isRowStyleFront: false }} pdfProps={{ fileName: '쇼케이스-03', isRowStyleFront: false }} />\n\t\t\t\t<p>마케팅 예산을 계층 구조로 출력한 모습입니다. ( 계층구조 데이터 표현 )</p>\n\t\t\t\t<p>추세를 나타내는 스파크 라인은 합계에 해당되는 행(Row)에만 선택적으로 그리도록 설정한 모습입니다.</p>\n\t\t\t</div>\n\t\t\t<AUIGrid ref={myGrid} columnLayout={columnLayout} gridProps={gridProps} />\n\t\t</div>\n\t);\n};\n\nexport default Showcase03;\n"
+  },
+  {
+    "name": "Showcase04",
+    "framework": "react-tsx",
+    "category": "showcases",
+    "relPath": "showcases\\Showcase04.tsx",
+    "content": "import { useEffect, useRef } from 'react';\nimport * as IGrid from 'aui-grid';\nimport AUIGrid from '../static/AUIGrid-React.tsx/AUIGridReact';\nimport './Showcase04.css';\n\nconst PUBLIC_URL = process.env.PUBLIC_URL;\n\n// eslint-disable-next-line\n// prettier-ignore\nconst names: string[] = ['A 전자', 'B 상사', 'C 철강', 'D 회사', 'E 통신', 'F 공사', 'G 주식회사', 'H 인터넷', 'I 식품', 'J 제과', 'K 연구소', 'L 전자', 'M 화학', 'N 인터넷', 'O로 통신', 'P 주식회사', 'Q 코스메틱', 'R 청과', 'S 방송', 'T 자동차', 'UU 엔터'];\n\n// eslint-disable-next-line\n// prettier-ignore\nconst prices: number[] = [150000, 230000, 420000, 1200000, 320000, 100000, 240000, 320000, 520000, 820000, 300000, 200000, 200000, 200000, 200000, 200000, 200000, 200000, 200000, 200000, 200000];\n\n// eslint-disable-next-line\nconst gaps: number[] = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];\n\n// eslint-disable-next-line\nconst volumes: number[] = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];\n\nconst createRandomData = (): any[] =>\n\tnames.map((name, i) => ({\n\t\tid: i + 1,\n\t\tname,\n\t\tprice: prices[i],\n\t\topen: prices[i],\n\t\thigh: prices[i],\n\t\tlow: prices[i],\n\t\tgap: 0,\n\t\tvolume: 0\n\t}));\n\nconst createRandomRows = (): any[] => {\n\tconst codeCount = names.length;\n\tconst randomCount = Math.floor(Math.random() * 10);\n\tconst codes: number[] = [];\n\n\tfor (let i = 0; i < randomCount; i++) {\n\t\tcodes.push(Math.ceil(Math.random() * codeCount));\n\t}\n\n\treturn codes.map((code) => {\n\t\tconst isPlus = Math.random() > 0.5;\n\t\tlet gap = isPlus ? 3000 : -3000;\n\t\tconst index = code - 1;\n\t\tconst limitGap = prices[index] * 0.3;\n\n\t\tgaps[index] += gap;\n\t\tgap = gaps[index];\n\n\t\tif (Math.abs(gap) > limitGap) {\n\t\t\tgap = gap > 0 ? limitGap : -limitGap;\n\t\t}\n\n\t\tconst price = prices[index] + gap;\n\t\tvolumes[index] += Math.floor(Math.random() * 10000);\n\n\t\treturn { id: code, price, gap, volume: volumes[index] };\n\t});\n};\n\nconst columnLayout: IGrid.Column[] = [\n\t{\n\t\tdataField: 'name',\n\t\theaderText: '종목명'\n\t},\n\t{\n\t\tdataField: 'price',\n\t\theaderText: '현재가',\n\t\twidth: 120,\n\t\tdataType: 'numeric',\n\t\tstyle: 'my-right-style',\n\t\tformatString: '#,##0'\n\t},\n\t{\n\t\tdataField: 'gap',\n\t\theaderText: '대비',\n\t\tdataType: 'numeric',\n\t\tformatString: '#,##0',\n\t\tstyle: 'my-right-style',\n\t\twidth: 120,\n\t\trenderer: {\n\t\t\ttype: IGrid.RendererKind.IconRenderer,\n\t\t\ticonPosition: 'aisle',\n\t\t\ticonWidth: 7,\n\t\t\ticonHeight: 6,\n\t\t\ticonFunction: (_rowIndex, _columnIndex, _value, item) => {\n\t\t\t\tif (item.gap < 0) return PUBLIC_URL + '/assets/ico_down.gif';\n\t\t\t\tif (item.gap > 0) return PUBLIC_URL + '/assets/ico_up.gif';\n\t\t\t\treturn PUBLIC_URL + '/assets/ico_flat.gif';\n\t\t\t}\n\t\t},\n\t\tstyleFunction: (_rowIndex, _columnIndex, _value, _headerText, item) => {\n\t\t\tif (item.gap < 0) return 'my-custom-down';\n\t\t\tif (item.gap > 0) return 'my-custom-up';\n\t\t\treturn 'my-custom-normal';\n\t\t}\n\t},\n\t{\n\t\tdataField: 'rate',\n\t\theaderText: '등락율',\n\t\tdataType: 'numeric',\n\t\tformatString: '#,##0.00',\n\t\tpostfix: ' %',\n\t\tstyle: 'my-right-style',\n\t\twidth: 120,\n\t\texpFunction: (_rowIndex, _columnIndex, item) => {\n\t\t\tconst oldPrice = item.price - item.gap;\n\t\t\treturn Number(((item.gap / oldPrice) * 100).toFixed(2));\n\t\t},\n\t\tstyleFunction: (_rowIndex, _columnIndex, _value, _headerText, item) => { // eslint-disable-line\n\t\t\tif (item.gap < 0) return 'my-custom-down';\n\t\t\tif (item.gap > 0) return 'my-custom-up';\n\t\t\treturn 'my-custom-normal';\n\t\t}\n\t},\n\t{\n\t\tdataField: 'rateGraph',\n\t\theaderText: '등락율 그래프',\n\t\twidth: 120,\n\t\texpFunction: (_rowIndex, _columnIndex, item) => item.rate,\n\t\trenderer: {\n\t\t\ttype: IGrid.RendererKind.BarRenderer,\n\t\t\tshowLabel: false,\n\t\t\tmin: -30,\n\t\t\tmax: 30,\n\t\t\toffset: 30\n\t\t}\n\t},\n\t{\n\t\tdataField: 'volume',\n\t\theaderText: '거래량',\n\t\tdataType: 'numeric',\n\t\tformatString: '#,##0',\n\t\tstyle: 'my-right-style',\n\t\twidth: 120\n\t},\n\t{\n\t\tdataField: 'open',\n\t\theaderText: '시가',\n\t\tdataType: 'numeric',\n\t\tformatString: '#,##0',\n\t\tstyle: 'my-right-style',\n\t\twidth: 120\n\t},\n\t{\n\t\tdataField: 'high',\n\t\theaderText: '고가',\n\t\tdataType: 'numeric',\n\t\tformatString: '#,##0',\n\t\tstyle: 'my-custom-up',\n\t\texpFunction: (_rowIndex, _columnIndex, item) => Math.max(item.high, item.price),\n\t\twidth: 120\n\t},\n\t{\n\t\tdataField: 'low',\n\t\theaderText: '저가',\n\t\tdataType: 'numeric',\n\t\tformatString: '#,##0',\n\t\tstyle: 'my-custom-down',\n\t\texpFunction: (_rowIndex, _columnIndex, item) => Math.min(item.price, item.low),\n\t\twidth: 120\n\t}\n];\n\nconst gridProps: IGrid.Props = {\n\twidth: '100%',\n\theight: 480,\n\trowIdField: 'id'\n};\n\nconst Showcase04 = () => {\n\tconst myGrid = useRef<AUIGrid>(null);\n\n\tuseEffect(() => {\n\t\tconst grid = myGrid.current as AUIGrid;\n\t\tgrid.setGridData(createRandomData());\n\n\t\tconst timer = setInterval(() => {\n\t\t\tgrid.refreshRows(createRandomRows(), 'my-refresh-row-flash-style', 200);\n\t\t}, 300);\n\n\t\treturn () => clearInterval(timer);\n\t}, []);\n\n\treturn (\n\t\t<div>\n\t\t\t<div className=\"desc\">\n\t\t\t\t<p>실시간 주식 현황(나의 관심 종목)을 구현한 데모입니다.</p>\n\t\t\t\t<p>주식은 가상의 주식으로 랜덤하게 로컬에서 0.3초 마다 거래가 이루어진 종목만 갱신하도록 설정한 모습입니다.</p>\n\t\t\t\t<p>처음 데이터를 그리드에 삽입 한 후 그리드에 특정 행의 셀 값(현재가, 대비가, 거래량)만 갱신하는 모습입니다.</p>\n\t\t\t\t<p>참고 : AUIGrid 가 서버와 통신하는 방법 및 속도까지 커버하지 않습니다. AUIGrid 는 단순히 출력해 주는 역할만 할 뿐입니다.</p>\n\t\t\t\t<p>이 데모와 같이 빠른 속도로 주식 정보를 갱신하는 것은 일반 Ajax 통신으론 불가능합니다.</p>\n\t\t\t\t<p>만약, 웹 상에서 주식 정보를 실시간으로 빠르게 갱신하고자 한다면 웹소켓(Web Socket)으로 구성하는 것이 최선일 것입니다.</p>\n\t\t\t</div>\n\t\t\t<AUIGrid name=\"showcase4\" ref={myGrid} columnLayout={columnLayout} gridProps={gridProps} />\n\t\t</div>\n\t);\n};\n\nexport default Showcase04;\n"
+  },
+  {
+    "name": "Showcase05",
+    "framework": "react-tsx",
+    "category": "showcases",
+    "relPath": "showcases\\Showcase05.tsx",
+    "content": "import { useEffect, useRef } from 'react';\nimport * as IGrid from 'aui-grid';\nimport AUIGrid from '../static/AUIGrid-React.tsx/AUIGridReact';\nimport axios from 'axios';\nimport ExportGridDataView from '../samples/ExportGridDataView';\nimport './Showcase05.css';\n\nconst exportProps = {\n\tfileName: '쇼케이스-05',\n\theaders: [\n\t\t{ text: '', height: 20 },\n\t\t{\n\t\t\ttext: '국가별 핸드폰 판매 통계',\n\t\t\theight: 40,\n\t\t\tstyle: { fontSize: 20, textAlign: 'center', color: '#ff0000', fontWeight: 'bold', underline: true, background: '#DAD9FF' }\n\t\t},\n\t\t{ text: '', height: 5, style: { background: '#555555' } }\n\t],\n\tfooters: [\n\t\t{ text: '', height: 5, style: { background: '#555555' } },\n\t\t{\n\t\t\ttext: 'Copyright © AUISoft Co., Ltd.',\n\t\t\theight: 24,\n\t\t\tstyle: { textAlign: 'right', fontWeight: 'bold', color: '#ffffff', background: '#222222' }\n\t\t}\n\t]\n};\n\nconst columnLayout: IGrid.Column[] = [\n\t{\n\t\tdataField: 'country',\n\t\theaderText: 'Country',\n\t\twidth: 150,\n\t\tfilter: { showIcon: true, useExMenu: true }\n\t},\n\t{\n\t\tdataField: 'product',\n\t\theaderText: 'Product',\n\t\twidth: 150,\n\t\tfilter: { showIcon: true, useExMenu: true }\n\t},\n\t...Array.from({ length: 12 }, (_, i) => ({\n\t\tdataField: `m${i + 1}`,\n\t\theaderText: `${i + 1}월`,\n\t\tdataType: 'numeric' as const,\n\t\tformatString: '#,##0',\n\t\twidth: 100,\n\t\tdisableGrouping: true,\n\t\tstyle: 'showcase5-aui-grid-my-right-style'\n\t}))\n];\n\nconst footerLayout: IGrid.Footer[] = [\n\t{ labelText: '∑', positionField: '#base' },\n\t...Array.from({ length: 12 }, (_, i) => ({\n\t\tdataField: `m${i + 1}`,\n\t\tpositionField: `m${i + 1}`,\n\t\toperation: 'SUM' as const,\n\t\tformatString: '#,##0',\n\t\tstyle: 'showcase5-aui-grid-my-custom-sum-total'\n\t}))\n];\n\nconst gridProps: IGrid.Props = {\n\twidth: '100%',\n\theight: 480,\n\tuseContextMenu: true,\n\tshowBranchOnGrouping: false,\n\tenableFilter: true,\n\tshowFooter: true,\n\teditable: true,\n\tselectionMode: 'singleRow',\n\tuseGroupingPanel: true,\n\tgroupingFields: ['country', 'product'],\n\tgroupingSummary: {\n\t\tdataFields: ['m1', 'm2', 'm3', 'm4', 'm5', 'm6', 'm7', 'm8', 'm9', 'm10', 'm11', 'm12']\n\t},\n\tdisplayTreeOpen: true,\n\tenableCellMerge: true,\n\tcellMergeRowSpan: false,\n\trowStyleFunction: (_rowIndex, item) => {\n\t\tif (!item._$isGroupSumField) return null;\n\t\tswitch (item._$depth) {\n\t\t\tcase 2: return 'aui-grid-row-depth1-style';\n\t\t\tcase 3: return 'aui-grid-row-depth2-style';\n\t\t\tcase 4: return 'aui-grid-row-depth3-style';\n\t\t\tdefault: return 'aui-grid-row-depth-default-style';\n\t\t}\n\t}\n};\n\nconst Showcase05 = () => {\n\tconst myGrid = useRef<AUIGrid>(null);\n\n\tuseEffect(() => {\n\t\tconst grid = myGrid.current as AUIGrid;\n\n\t\tgrid.bind(IGrid.EventKind.CellClick, (event: IGrid.CellClickEvent) => {\n\t\t\tconsole.log(event.type);\n\t\t});\n\n\t\tgrid.bind(IGrid.EventKind.HeaderClick, (event: IGrid.HeaderClickEvent) => {\n\t\t\tconsole.log(event.type);\n\t\t});\n\n\t\tgrid.showAjaxLoader();\n\t\taxios.get('./data/country_phone_month_500.json').then((result) => {\n\t\t\tgrid.setGridData(result.data);\n\t\t\tgrid.removeAjaxLoader();\n\t\t});\n\t}, []);\n\n\treturn (\n\t\t<div>\n\t\t\t<div className=\"desc\">\n\t\t\t\t<ExportGridDataView myGrid={myGrid} xlsxProps={exportProps} pdfProps={exportProps} />\n\t\t\t\t<p>각각의 나라에 따라 각 제품별로 판매량을 보기 위해 그룹핑을 하여 가격에 대하여 합계를 계산한 자료입니다.</p>\n\t\t\t\t<p>일반 데이터를 받아 그리드가 그룹핑을 하고, 각 나라, 제품에 대하여 그리드에서 직접 합계를 계산합니다.</p>\n\t\t\t\t<p>필터링 또는 데이터 값 수정 시 동적으로 그룹핑 합계 및 푸터 값이 변경됩니다.</p>\n\t\t\t</div>\n\t\t\t<AUIGrid ref={myGrid} columnLayout={columnLayout} gridProps={gridProps} footerLayout={footerLayout} />\n\t\t</div>\n\t);\n};\n\nexport default Showcase05;\n"
+  },
+  {
+    "name": "Showcase06",
+    "framework": "react-tsx",
+    "category": "showcases",
+    "relPath": "showcases\\Showcase06.tsx",
+    "content": "import { useEffect, useRef } from 'react';\nimport * as IGrid from 'aui-grid';\nimport AUIGrid from '../static/AUIGrid-React.tsx/AUIGridReact';\nimport axios from 'axios';\nimport ExportGridDataView from '../samples/ExportGridDataView';\nimport './Showcase06.css';\n\nconst columnLayout: IGrid.Column[] = [\n\t{\n\t\tdataField: 'type0',\n\t\theaderText: '구분',\n\t\tcellMerge: true,\n\t\tstyle: 'showcase6-my-column-strong',\n\t\tfilter: { showIcon: true }\n\t},\n\t{\n\t\tdataField: 'type',\n\t\theaderText: '유형',\n\t\twidth: 120\n\t},\n\t{\n\t\tdataField: 'p131,p132,p133,p134,p135,p136,p137,p138,p139,p1310,p1311,p1312',\n\t\theaderText: '월별 추이',\n\t\twidth: 120,\n\t\trenderer: { type: IGrid.RendererKind.SparkColumnRenderer }\n\t},\n\t...(['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'].map((m) => ({\n\t\tdataField: `p13${m}`,\n\t\theaderText: `'13 ${m}월`,\n\t\tstyle: 'showcase6-my-column-text-right',\n\t\tdataType: 'numeric' as const,\n\t\tformatString: '#,##0'\n\t})))\n];\n\nconst gridProps: IGrid.Props = {\n\twidth: '100%',\n\theight: 480,\n\tenableCellMerge: true,\n\tenableFilter: true,\n\teditable: true,\n\tselectionMode: 'multipleCells',\n\tshowRowNumColumn: false,\n\tshowRowCheckColumn: false,\n\trowStyleFunction: (_rowIndex, item) => {\n\t\tif (item._mySum || item._mySum === 'true') return 'aui-grid-row-depth2-style';\n\t\treturn null;\n\t}\n};\n\nconst Showcase06 = () => {\n\tconst myGrid = useRef<AUIGrid>(null);\n\n\tuseEffect(() => {\n\t\tconst grid = myGrid.current as AUIGrid;\n\n\t\tgrid.bind(IGrid.EventKind.CellClick, (event: IGrid.CellClickEvent) => {\n\t\t\tconsole.log(event.type);\n\t\t});\n\n\t\tgrid.bind(IGrid.EventKind.HeaderClick, (event: IGrid.HeaderClickEvent) => {\n\t\t\tconsole.log(event.type);\n\t\t});\n\n\t\tgrid.showAjaxLoader();\n\t\taxios.get('./data/profit.json').then((result) => {\n\t\t\tgrid.setGridData(result.data);\n\t\t\tgrid.removeAjaxLoader();\n\t\t});\n\t}, []);\n\n\treturn (\n\t\t<div>\n\t\t\t<div className=\"desc\">\n\t\t\t\t<ExportGridDataView myGrid={myGrid} xlsxProps={{ fileName: '쇼케이스-06' }} pdfProps={{ fileName: '쇼케이스-06' }} />\n\t\t\t\t<p>손익을 크게 매출 수익, 원가, 경비로 보고 해당 내역을 출력한 모습입니다.</p>\n\t\t\t</div>\n\t\t\t<AUIGrid ref={myGrid} columnLayout={columnLayout} gridProps={gridProps} />\n\t\t</div>\n\t);\n};\n\nexport default Showcase06;\n"
+  },
+  {
+    "name": "Showcase07",
+    "framework": "react-tsx",
+    "category": "showcases",
+    "relPath": "showcases\\Showcase07.tsx",
+    "content": "import { useCallback, useEffect, useRef, useState } from 'react';\nimport * as IGrid from 'aui-grid';\nimport AUIGrid from '../static/AUIGrid-React.tsx/AUIGridReact';\nimport MyCalendarRenderer from '../renderers/MyCalendarRenderer';\nimport './Showcase07.css';\n\nconst genGridData = (currentDate: Date) => {\n\tconst date = new Date(currentDate);\n\tconst thisYear = date.getFullYear();\n\tconst thisMonth = date.getMonth() + 1;\n\tconst startDate = new Date(thisYear, thisMonth - 1, 1);\n\tconst endDay = new Date(thisYear, thisMonth, 0);\n\tconst endCount = endDay.getDate();\n\tconst startDay = startDate.getDay();\n\tconst data: any[] = [];\n\tlet weekArray: any[] = [];\n\n\tfor (let i = 0; i < startDay; i++) {\n\t\tweekArray.push(null);\n\t}\n\n\tfor (let i = 1; i <= endCount; i++) {\n\t\tif (weekArray.length === 7) {\n\t\t\tdata.push(weekArray);\n\t\t\tweekArray = [];\n\t\t}\n\t\tweekArray.push({ date: i, value: Math.floor(Math.random() * 100) });\n\t}\n\n\tif (weekArray.length !== 0) {\n\t\tdata.push(weekArray);\n\t}\n\treturn data;\n};\n\nconst calendarRenderer = {\n\ttype: IGrid.RendererKind.CustomRenderer,\n\tjsClass: MyCalendarRenderer\n};\n\nconst columnLayout: IGrid.Column[] = [\n\t{ dataField: '0', headerText: '일', style: 'my-sunday-style', headerStyle: 'my-sunday-style', renderer: calendarRenderer },\n\t{ dataField: '1', headerText: '월', renderer: calendarRenderer },\n\t{ dataField: '2', headerText: '화', renderer: calendarRenderer },\n\t{ dataField: '3', headerText: '수', renderer: calendarRenderer },\n\t{ dataField: '4', headerText: '목', renderer: calendarRenderer },\n\t{ dataField: '5', headerText: '금', renderer: calendarRenderer },\n\t{ dataField: '6', headerText: '토', style: 'my-saturday-style', headerStyle: 'my-saturday-style', renderer: calendarRenderer }\n];\n\nconst gridProps: IGrid.Props = {\n\twidth: '100%',\n\theight: 480,\n\tselectionMode: 'none',\n\tenableSorting: false,\n\tshowRowNumColumn: false,\n\tenableColumnResize: false,\n\trowHeight: 80\n};\n\nconst Showcase07 = () => {\n\tconst myGrid = useRef<AUIGrid>(null);\n\tconst [originDate, setOriginDate] = useState<Date>(new Date());\n\n\tuseEffect(() => {\n\t\tmyGrid.current?.setGridData(genGridData(originDate));\n\t}, [originDate]);\n\n\tconst changeDataToNext = useCallback(() => {\n\t\tsetOriginDate((prev) => {\n\t\t\tconst date = new Date(prev);\n\t\t\tdate.setMonth(date.getMonth() + 1);\n\t\t\treturn date;\n\t\t});\n\t}, []);\n\n\tconst changeDataToPrev = useCallback(() => {\n\t\tsetOriginDate((prev) => {\n\t\t\tconst date = new Date(prev);\n\t\t\tdate.setMonth(date.getMonth() - 1);\n\t\t\treturn date;\n\t\t});\n\t}, []);\n\n\treturn (\n\t\t<div>\n\t\t\t<div className=\"desc\">\n\t\t\t\t<p>달력에 개별 날짜마다 목표치 달성률을 표시한 데모입니다.</p>\n\t\t\t\t<p>그리드에 출력되는 셀은 사용자 정의 렌더러(CustomRenderer)를 사용하였습니다.</p>\n\t\t\t\t<p>이와 같이 사용자가 원하는 셀 형식을 자바스크립트로 작성할 수 있습니다.</p>\n\t\t\t\t<div className=\"force-text-center\">\n\t\t\t\t\t<button onClick={changeDataToPrev}>이전 달</button>\n\t\t\t\t\t<span style={{ margin: '2px 40px' }}>\n\t\t\t\t\t\t{originDate.getFullYear() + '년 ' + (originDate.getMonth() + 1) + '월'}\n\t\t\t\t\t</span>\n\t\t\t\t\t<button onClick={changeDataToNext}>다음 달</button>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<AUIGrid name=\"showcase7\" ref={myGrid} columnLayout={columnLayout} gridProps={gridProps} />\n\t\t</div>\n\t);\n};\n\nexport default Showcase07;\n"
+  }
+]

package/data/static-utils-index.json

@@ -0,0 +1,229 @@
+[
+  {
+    "name": "create",
+    "version": "2.7.0",
+    "description": "그리드를 최초로 생성하는 메소드입니다.",
+    "parameters": [
+      {
+        "name": "",
+        "description": "pid : (String) 그리드가 생성될 Div 의 id"
+      },
+      {
+        "name": "",
+        "description": "columnLayout : (Object) 그리드 생성하고자 하는 칼럼 레이아웃"
+      },
+      {
+        "name": "",
+        "description": "gridProps : (Object) 그리드 생성 시 변경할 그리드 속성(key-value) 객체"
+      }
+    ],
+    "notes": "Return : (String) 그리드가 생성될 Div의 id 를 반환합니다.(즉, 파라메터로 넣은 pid 반환)"
+  },
+  {
+    "name": "defaultProps",
+    "version": "2.11.0",
+    "description": "AUIGrid 의 기본 속성을 작성할 수 있는 정적(Static) 속성입니다.\nAUIGrid 를 생성 할 때 기본적으로 defaultProps 를 확장하여 생성합니다.\n따라서 매 페이지의 그리드를 생성할 때 공통적인 사항 또는 다국어 작성을 위한 텍스트 속성을 여기서 작성하십시오.\n이 함수의 사용 예는 다음과 같습니다.\n위와 같이 작성한 코드를 프로젝트 공용으로 포함시키는 common.js(예를 들면 common.js 임, 추가로 AUIGridDefault.js 라고 만들어도 무관)에 추가하십시오.\n그러면 그리드를 생성할 때 defaultProps 를 기본값으로 적용시켜 생성 합니다.",
+    "parameters": [],
+    "example": "AUIGrid.defaultProps = {\n      editable : true,\n      filterOkText : \"Okay\",\n      filterCancelText : \"Cancel\"\n };"
+  },
+  {
+    "name": "formatDate",
+    "version": "2.8.1",
+    "description": "AUIGrid 에서 사용하는 날짜 포맷 방식을 그대로 사용하고자 할 때 사용 할 수 있는 날짜 포맷 함수입니다.",
+    "parameters": [
+      {
+        "name": "",
+        "description": "date : (String) 포맷하고자 하는 날짜"
+      },
+      {
+        "name": "",
+        "description": "formatString : (String) 날짜를 원하는 형태로 출력하고자 하는 포맷 형식"
+      },
+      {
+        "name": "",
+        "description": "yy : 연(Year) 2자리로 표현(예:15)"
+      },
+      {
+        "name": "",
+        "description": "yyyy : 연(Year) 4자리로 표현(예:2015)"
+      },
+      {
+        "name": "",
+        "description": "m : 월(Month) 1자리로 표현"
+      },
+      {
+        "name": "",
+        "description": "mm : 월(Month) 2자리로 표현"
+      },
+      {
+        "name": "",
+        "description": "mmm : 월(Month) 영문 이름 3자리로 표현(예:Jan)"
+      },
+      {
+        "name": "",
+        "description": "mmmm : 월(Month) 영문 전체 이름으로 표현(예:January)"
+      },
+      {
+        "name": "",
+        "description": "d : 날짜(Day) 1자리수로 표현(예:1)"
+      },
+      {
+        "name": "",
+        "description": "dd  : 날짜(Day) 2자리수로 표현(예:01)"
+      },
+      {
+        "name": "",
+        "description": "ddd : 한글 요일로 표현(예:월, 화, 수)"
+      },
+      {
+        "name": "",
+        "description": "dddd : 영문 요일 3자리 이름으로 표현(예:Mon, Tue)"
+      },
+      {
+        "name": "",
+        "description": "h : 시(Hours) 12시간제 1자리로 표현"
+      },
+      {
+        "name": "",
+        "description": "hh : 시(Hours) 12시간제 2자리로 표현"
+      },
+      {
+        "name": "",
+        "description": "H : 시(Hours) 24시간제 1자리로 표현"
+      },
+      {
+        "name": "",
+        "description": "HH : 시(Hours) 24시간제 2자리로 표현"
+      },
+      {
+        "name": "",
+        "description": "M : 분(Minutes) 1자리로 표현"
+      },
+      {
+        "name": "",
+        "description": "MM : 분(Minutes) 2자리로 표현"
+      },
+      {
+        "name": "",
+        "description": "s : 초(Seconds) 1자리로 표현"
+      },
+      {
+        "name": "",
+        "description": "ss : 초(Seconds) 2자리로 표현"
+      },
+      {
+        "name": "",
+        "description": "t : 오전, 오후를 한글로 표현(예: 오전, 오후)"
+      },
+      {
+        "name": "",
+        "description": "tt : 오전, 오후를 am 또는 pm으로 표현"
+      },
+      {
+        "name": "",
+        "description": "T :  오전, 오후를 A 또는 P로 표현"
+      },
+      {
+        "name": "",
+        "description": "TT : 오전, 오후를 AM 또는 PM으로 표현"
+      }
+    ],
+    "notes": "이 함수의 사용 예는 다음과 같습니다.\nReturn : (String) 날짜를 지정한 포맷 형식으로 포매팅하여 반환합니다.",
+    "example": "const fd = AUIGrid.formatDate(\"2017/01/01\", \"yyyy년 mm월 dd일\");\n console.log(fd); // \"2017년 01월 01일\" 출력됨.\n const fd2 = AUIGrid.formatDate(\"20170101\", \"yyyy. m. d\");\n console.log(fd2); // \"2017. 1. 1.\" 출력됨\n const fd3 = AUIGrid.formatDate(new Date(), \"yyyy. m. d. hh:MM:ss\");\n console.log(fd3); // 오늘 현재 날짜 및 시간 출력됨"
+  },
+  {
+    "name": "formatNumber",
+    "version": "2.8.1",
+    "description": "AUIGrid 에서 사용하는 숫자 포맷 방식을 그대로 사용하고자 할 때 사용 할 수 있는 숫자 포맷 함수입니다.",
+    "parameters": [
+      {
+        "name": "",
+        "description": "number : (Number) 포맷하고자 하는 숫자"
+      },
+      {
+        "name": "",
+        "description": "formatString : (String) 숫자를 원하는 형태로 출력하고자 하는 포맷 형식"
+      },
+      {
+        "name": "",
+        "description": "rouding : (String) 포매팅할 때 지정된 소수점 뒤를 반올림(rounding, \"기본값\"), 내림(ceil), 올림(floor) 처리할지를 지정합니다.(유효값 : \"rounding\", \"ceil\", \"floor\")"
+      }
+    ],
+    "notes": "숫자 포맷 스트링은 다음과 같습니다.\n\"0\" 과 \"#\"의 차이는 \"0\"은 반드시 자리수를 차지하도록 채웁니다. \"#\"은 있는 경우 출력 시킴\n- ###0 : 컴마 구분자 없이 정수 표현\n- #### : 컴마 구분자 없이 정수 표현, 0인 경우 공백 처리\n- #,##0 : 천단위 마다 컴마 구분자 정수 표현\n- #,### : 천단위 마다 컴마 구분자 정수 표현, 0인 경우 공백 처리\n- #,##0.0 : 천단위 마다 컴마 구분자 소수 1자리 의무 표현(소수 2자리에서 기본적으로 반올림 처리)\n- #,##0.# : 천단위 마다 컴마 구분자 소수 있다면 1자리 표현, 0인 경우 공백 처리(소수 2자리에서 기본적으로 반올림 처리)\n- #,##0.00 : 천단위 마다 컴마 구분자 소수 2자리 의무 표현(소수 3자리에서 기본적으로 반올림 처리)\n- #,##0.0# : 천단위 마다 컴마 구분자 소수 1자리 의무, 2자리 있다면 표현(소수 3자리에서 기본적으로 반올림 처리)\n- # ##0,00 또는 #.##0,00 와 같이 해외에서 사용하는 포맷 형식 지원함(즉, 천단위를 공백 또는 점으로 소수점을 컴마로 변경)\n- 확장해서 \"000000\" 로 지정하면 의무적으로 정수 6자리를 출력함. 값이 1인 경우 포매팅 되어 \"000001\" 로 출력 시킴\n이 함수의 사용 예는 다음과 같습니다.\nReturn : (String) 숫자를 지정한 포맷 형식으로 포매팅하여 반환합니다.",
+    "example": "const fn = AUIGrid.formatNumber(123456.789, \"#,##0\");\n console.log(fn); // \"123,457\" 출력됨. (소수점이 기본적으로 반올림됨)\n const fn2 = AUIGrid.formatNumber(\"123456.789\", \"#,##0\", \"floor\");\n console.log(fn2); // \"123,456\" 출력됨\n const fn3 = AUIGrid.formatNumber(\"123456.789\", \"#,##0.00\");\n console.log(fn3); // \"123,456.79\" 출력됨"
+  },
+  {
+    "name": "getActiveGrid",
+    "version": "3.0.6",
+    "description": "동일한 문서 객체 모델(DOM) 내에서 AUIGrid 가 포커스를 받은 경우 포커싱을 받은 그리드를 반환합니다.\n예로 단일 페이지 내에서 2개의 그리드를 생성했을 때 사용자가 포커스를 준 그리드를 얻을 수 있습니다.\nReturn : (Boolean) 현재 포커스 받은 그리드가 있다면 해당 그리드가 생성될 때 설정한 Div의 id 를 반환합니다.(즉, 생성할 때 파라메터로 넣은 pid 반환)\n만약 그리드가 아닌 다른 엘리먼트에 포커스가 있다면 null 을 반환합니다.",
+    "parameters": [],
+    "example": "const curActiveGridID = AUIGrid.getActiveGrid();\n console.log(curActiveGridID);"
+  },
+  {
+    "name": "getCreatedGridAll",
+    "version": "3.0.6",
+    "description": "동일한 문서 객체 모델(DOM) 내에서 생성된 모든 그리드를 반환합니다.\nReturn : (Array) 생성된 그리드의 부모 Div의 id 가 담긴 배열을 반환합니다.(즉, 생성할 때 파라메터로 넣은 pid 반환)",
+    "parameters": [],
+    "example": "const gridIds = AUIGrid.getCreatedGridAll();\n console.log(gridIds.length);"
+  },
+  {
+    "name": "isCreated",
+    "version": "3.0.0",
+    "description": "현재 주어진 pid에 대한 그리드가 생성되었는지는 반환합니다.",
+    "parameters": [
+      {
+        "name": "",
+        "description": "pid : (String) 그리드의 pid"
+      }
+    ],
+    "notes": "Return : (Boolean) 주어진 pid 에 대한 그리드가 생성되어 있는 경우 true를 반환합니다."
+  },
+  {
+    "name": "makeValueMasked",
+    "version": "3.0.11",
+    "description": "주어진 값을 마스킹 적용 시켜 반환합니다.",
+    "parameters": [
+      {
+        "name": "",
+        "description": "mask : (String) 마스크 설정"
+      },
+      {
+        "name": "",
+        "description": "value : (String) 마스크 적용 시킬 값"
+      }
+    ],
+    "notes": "Return : (String) 마스킹 적용된 값. 주어진 값이 마스킹 유효 값이 아닌 경우 null 반환",
+    "example": "const masked = AUIGrid.makeValueMasked(\"99:99:99\", \"123456\");\n console.log(masked); // \"12:34:56\" 출력됨\n const masked = AUIGrid.makeValueMasked(\"(999) 999-999-999\", \"123456789123\");\n console.log(masked); // \"(123) 456-789-123\" 출력됨"
+  },
+  {
+    "name": "makeValueUnmasked",
+    "version": "3.0.11",
+    "description": "마스킹 적용된 값을 해제 시켜 반환합니다.",
+    "parameters": [
+      {
+        "name": "",
+        "description": "mask : (String) 마스크 설정"
+      },
+      {
+        "name": "",
+        "description": "value : (String) 마스크 적용된 값"
+      }
+    ],
+    "notes": "Return : (String) 마스킹 해제시킨 값. 주어진 값이 마스킹 유효 값이 아닌 경우 null 반환",
+    "example": "const masked = AUIGrid.makeValueUnmasked(\"99:99:99\", \"12:34:56\");\n console.log(masked); // \"123456\" 출력됨\n const masked = AUIGrid.makeValueUnmasked(\"(999) 999-999-999\", \"(123) 456-789-123\");\n console.log(masked); // \"123456789123\" 출력됨"
+  },
+  {
+    "name": "releaseDate",
+    "version": "2.7.0",
+    "description": "AUIGrid 의 배포 날짜를 반환합니다.\n현재 사용하고 있는 AUIGrid 의 배포 정보를 알고자 한다면 다음처럼 알 수 있습니다.",
+    "parameters": [],
+    "example": "console.log(AUIGrid.releaseDate);"
+  },
+  {
+    "name": "version",
+    "version": "2.7.0",
+    "description": "AUIGrid 버전 정보를 반환합니다.\n현재 사용하고 있는 AUIGrid 의 버전 정보를 알고자 한다면 다음처럼 알 수 있습니다.",
+    "parameters": [],
+    "example": "console.log(AUIGrid.version);"
+  }
+]