GaramX

유용한 DataGrid들

SlickGrid - Old SlickGrid SlickGrid Homepage angular datatable ExcelJS Js-Xlsx Canvas-DataGrid

출처 : React datagrid component제작기 (with ES6,TypeScript,React)

https://github.com/jsdevkr/datagrid

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

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

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

scrollTop(ST)와 scrollBarTop(BT)를 구하기 위해서는 약간의 수학지식이 필요하다. scrollContainerHeight(SCH), scrollHeight(SH)와 scrollBarContainerHeight(BCH), scrollBarHeight(BH)의 비율이 ST와 BT의 비율과 동일하다는 원리를 이용하면 된다.

ST : SH - SCH = BT : BH - BCH
BT = ST * (BH - BCH) / (SH - SCH)
ST = (SH - SCH) * BT / (BH - BCH)