===== Data Grid =====

[[https://www.angularminds.com/blog/article/15-useful-javascript-based-data-grid-libraries-for-web-app-development.html|유용한 DataGrid들]]

[[https://github.com/mleibman/SlickGrid/wiki|SlickGrid - Old]]
[[https://github.com/6pac/SlickGrid|SlickGrid]]
[[http://slickgrid.net|SlickGrid Homepage]]
[[https://www.beyondjava.net/how-to-use-a-javascript-datatable-in-an-angular-application|angular datatable]]
[[https://github.com/guyonroche/exceljs|ExcelJS]]
[[https://github.com/SheetJS/js-xlsx|Js-Xlsx]]
[[https://github.com/TonyGermaneri/canvas-datagrid|Canvas-DataGrid]]
===== axui-datagrid =====
출처 : [[https://medium.com/chequer/react-datagrid-component-제작기-with-es6-typescript-4efcbfe1b442|React datagrid component제작기 (with ES6,TypeScript,React)]]

https://github.com/jsdevkr/datagrid

==== 필수기능 ====
사용자가 데이터 그리드를 통해 얻고자하는 경험이 결국 '엑셀'과 비슷하므로 데이터그리드는 상당히 많은 기능을 제고하고 있다. 그 기능이 워낙 방대해서 딱히 표준은 없지만 최소 다음 10가지 정도의 기능을 만족해야 DataGrid로서 가치가 있다고 생각한다.

  * 원하는 영역 선택 후 클립보드에 저장하기
  * 데이터 정렬
  * 데이터 필터링
  * 특정 데이터를 간단하게 수정하기(inline edit)
  * 셀의 데이터를 서식에 맞게 보여주기(formatter)
  * 셀에 수식적용하기(formatter)
  * click, keyDown이벤트등에 따라 특정 작업 수행하기
  * 멀티컬럼헤더(이것 한국인들만 원하는 게 아닐까...)
  * 특정열 또는 행까지 틀고정
  * 컬럼의 너비 조정
  * 데이터 그룹화 기능
  * 데이터 소계 및 합계

사람들은 MS사의 엑셀에 매우 익숙해져 있고 이와 비슷한 경험을 웹에서 하고 싶어 하므로 빠른 로딩, 부드러운 스크롤링, 풍부한 기능을 모두 담으면서도 동시에 컴포넌트를 사용하는 개발자들이 쉽고 간편하게 사용할 수 있도록 인터페이스를 설계해야 한다. 따라서 요구사항 수집 및 분석, 설계단계에서부터 많은 고민을 시작할 수 밖에 없다.

===== DOM 엘리먼트 구조설계 =====
==== 처음 ====
{{pingpong:datagrid:dom_element.png|설계1단계}}
==== 두번째 ====

{{pingpong:datagrid:design_2.png?1846|설계2단계}}
==== Scroll-container와 scroll ====

{{pingpong:datagrid:scroll.png|scroll-container와 scroll}}
==== scrollTop(ST)와 scrollBarTop(BT) ====

{{pingpong:datagrid:st_bt.png?700|scrollTop(ST)와 scrollBarTop(BT)}}
scrollTop(ST)와 scrollBarTop(BT)를 구하기 위해서는 약간의 수학지식이 필요하다. scrollContainerHeight(SCH), scrollHeight(SH)와 scrollBarContainerHeight(BCH), scrollBarHeight(BH)의 비율이 ST와 BT의 비율과 동일하다는 원리를 이용하면 된다.
          
<code javascript>
ST : SH - SCH = BT : BH - BCH
BT = ST * (BH - BCH) / (SH - SCH)
ST = (SH - SCH) * BT / (BH - BCH)
          </code>

==== 프로젝트폴더구성 ====
^  프로젝트 루트 폴더의 구성  ^^
|src |컴포넌트 소스 폴더 |
|dev |테스트와 샘플사이트 개발용 폴더 |
|dist |npm배포를 위한 폴더 |
|docs |[[http://axui-datagrid.axisj.com|axui-datagrid.axisj.com서비스를 위한 폴더]]|

^  src 컴포넌트 소스 폴더 ^^
|@types||
|assets||
|axui-datagrid||
|components||
|examples||
|pages||
|routes||
|styles||