무료 그리드 중에 맞는 게 없어서 직접 만들었습니다
안녕하세요.
업무 화면에 쓸 그리드를 찾다가, 무료로 쓸 수 있는 것들을 찾아 사용해 보았으나 제 상황에는 잘 안 맞더군요.
빌드 도구 없는 환경에 넣기 번거롭거나, 한글 입력에서 조합이 깨지거나, 변경 추적을 결국 직접 짜야 하거나. 하나씩은 되는데 다 되는 걸 못 찾아서 결국 직접 만들었습니다.
■ 데모 (직접 만져보실 수 있습니다)
https://pulsekcode.github.io/modugrid/samples_ko/index.html
■ GitHub
https://github.com/PulseKCode/modugrid
■ 설치
npm install modugrid
또는 script 태그 하나로도 됩니다.
■ 이런 것들이 들어 있습니다
- 순수 JavaScript, 의존성 0. 빌드 도구·프레임워크 없이 동작합니다
- 변경 추적이 내장이라 submit() 한 줄이면 { inserted, updated, deleted } 형태로 서버에 넘어갑니다
- 한글 IME 처리 (hidden input 방식)
- 코드값과 표시명 분리 — 저장은 ACT, 화면은 Active
- 행/셀 단위 편집 잠금, 소프트 삭제, 되돌리기, 엑셀 복사·붙여넣기
- 정렬·필터·검색·페이징·가상 스크롤·고정 컬럼·그룹 헤더·트리
- 테마 11종, 한 화면에 여러 그리드
- 샘플 113개, 한글/영문 문서, 테스트 131개
- MIT
개발에는 AI를 많이 활용했습니다. 설계와 검증은 직접 했지만 구현은 상당 부분 도움을 받았습니다.
그래서 놓친 부분이 있을 겁니다. 특히 대량 데이터 성능은 검증이 부족하고, TypeScript 정의와 React 래퍼는 아직 없습니다.
써보시고 이상한 점이나 아쉬운 점 있으면 알려주시면 감사하겠습니다.