Svelte + Materialize.css 데이터그리드 예시

 

Material Grid Test

 
Svelte.js + Materialize.css 를 사용할 경우에 최적화된 데이터그리드.
 
react 나 vue 를 쓰면 나와있는 데이터그리드 라이브러리가 많으니까 그냥 아무렇게나 쓴다고 쳐도 Svelte 는 진짜 아무리 찾아봐도 제대로 된 라이브러리가 없는것 처럼 보여서 아예 못쓰는건가 싶어서 직접 만들어버림.
 
초기버전인 만큼 기능과 버그가 자잘자잘하게 있음.
 
일단 체크박스를 통한 다중선택은 가능하나 드래그를 통한 다중선택은 지원하지 않음.
그것말고도 헤더컬럼의 커스터마이징이라던가 그런것도 지원 안함.
셀 더블클릭을 통한 데이터수정도 지원하긴 하는데 이건 조금 더 손봐야 할 예정.
 
 
 
써보면 알겠지만 넥사크로의 그나마 강점이라 불리는 데이터그리드를 아예 스벨트 컴포넌트로 구현한것임.
위에서도 언급했듯 react 나 vue 는 그에 맞춰서 전용으로 나온 컴포넌트를 쓰면 되고
의외로 Toast UI 에서 제공되는 Grid 는 Svelte 를 지원하지 않는듯. 아무리 써봐도 페이지 단위로 펑크가 나버림.
비록 디자인은 Materialize.css 를 써야한다는 문제가 있으나 본인이 프론트엔드 디자인 조금 할 줄 안다면 그냥 직접 수정해서 써도 무방.
넥사크로 그따구것이 코어 당 몇백만원 해서 옥타코어만 되어도 최소 2천만원을 넘기네 뭐네 하는 소리가 나오는 동안 멀쩡하고 노멀한 개발자들은 멀쩡한 무료 라이브러리나 기능좋은 평가판 라이브러리를 사용하면 되는것임.
 
p.s 001: 조금 더 고도화된 듯이 기능 개선하고 버그 다듬은 버전은 커밋 안올림. 내가 이거 만드는데 추석연휴 중 며칠이나 날렸는데...
p.s 002: Javascript 라이브러리로 <script src> 를 쓴다던가 하는것과는 달리 svelte 페이지 자체를 라이브러리화 시킨 것임. 그래서 생성자를 생성하니 엘리먼트를 제어하니 그런 개념이 아니라 그냥 <DataGrid> 이런식으로 Svelte 에 때려박아서 사용하는 형태. 따라서 번들 사용하듯이 사용할 수 없고, 번들로도 배포할 계획 없음
p.s 003: 3번 주석을 단 시기에 해당 글에 하트가 4개가 달렸는데 코딩은 개뿔 공기만 불쌍하게 숨쉬는게 무가치한 스팸블로거들이 단 거라 어뷰징이 아님을 밝힘(...) 네이버 블로그와는 달리 하트를 관리자 직권으로 제거하는 방법이 티스토리에는 없는듯