DataGrid

스크립트 한 줄로 끝나는 데이터그리드

의존성 0, 빌드 도구 없이 동작하는 순수 JavaScript 데이터그리드. 10만 행 가상 스크롤부터 팝업 폼 편집까지, 업무 화면에 필요한 것을 담았습니다.

평가판 다운로드 라이브 데모 보기 가격 안내

전 기능 · 기간 제한 없음 · 워터마크만 표시 — 버전 2.31.1

<link rel="stylesheet" href="datagrid.css">
<script src="datagrid.js"></script>
<script>
  var grid = new DataGrid(document.getElementById('myGrid'), {
    columnDefs: [{ field: 'name', filter: 'text', editable: true }],
    rowData: rows,
  });
</script>

무엇이 다른가

아래 여섯 가지는 전부 이 사이트의 데모에서 직접 확인할 수 있습니다. 문서가 아니라 실행되는 화면이 근거입니다.

1. <script> 한 줄, 빌드 도구 없이

npm도 번들러도 필요 없습니다. <script> 태그 하나로 전역 DataGrid 하나만 노출됩니다. JSP·ASP.NET·PHP 등 기존 서버 렌더링 화면, 빌드 파이프라인이 없는 레거시 프로젝트에 파일 두 개를 올리는 것으로 도입이 끝납니다.

외부 CDN·서드파티 의존성이 전혀 없고 라이선스 검증도 라이브러리 안에서 이뤄지므로 폐쇄망에서도 그대로 동작합니다.

2. 10만 행 가상 스크롤

보이는 행만 DOM에 렌더링하는 세로 가상화로 100,000행 데이터를 부드럽게 스크롤합니다. 컬럼이 수백 개인 화면을 위한 가로(컬럼) 가상화도 지원합니다.

10만 행 데모 열기 →

3. 인라인 편집 + 팝업 폼 편집

셀 더블클릭 인라인 편집(text·number·date·select·multiselect·radio·checkbox·커스텀 에디터)과, 행 전체를 폼으로 편집하는 팝업 에디터를 함께 제공합니다. 컬럼 정의 하나가 그리드와 폼 양쪽에 그대로 재사용되어 별도 폼 스키마가 없습니다.

변경 추적(dirty 표시)·삭제 스테이징·상태 컬럼·Ctrl+Z 실행 취소로 “수정을 모아서 한 번에 저장”하는 업무 화면 패턴을 그리드가 직접 지원합니다. 필수 입력 표시와 검증(required·validator)은 팝업 폼에서 전 타입에 적용됩니다.

4. 한국어 문서, 다국어 UI

API 문서·가이드·데모 설명이 전부 한국어입니다. 그리드가 그리는 UI 문자열 (필터 메뉴·페이지네이션·오버레이)은 localeText 한 곳으로 교체할 수 있고, 한국어·영어 로케일이 내장되어 있습니다. 필요한 키만 골라 덮어쓰는 부분 커스터마이징도 됩니다.

5. CSS 토큰 테마 · 다크 모드

색·크기·간격이 --dg-* CSS 커스텀 프로퍼티 45개로 열려 있습니다. JS를 건드리지 않고 CSS 몇 줄로 사내 디자인에 맞출 수 있고, 라이트/다크 테마가 내장되어 setTheme('dark') 호출 한 번으로 전환됩니다.

디자인 시스템 갤러리 →

6. 트리 · 그룹핑 · 서버 연동 · 내보내기

계층 데이터 트리(3상태 체크박스 캐스케이드, 지연 로딩), 다단계 행 그룹핑과 집계(sum·avg·min·max·count·커스텀), 전체 요약 행을 지원합니다. 스타일·병합까지 포함한 Excel 내보내기와 엑셀 호환 클립보드 복사/붙여넣기(TSV)로 “엑셀로 뽑아 주세요”에 바로 응답할 수 있습니다.

원격 데이터는 dataSource에 서버 처리 축을 지정하면 (sortMode·filterMode·pageMode) 서버 페이징·정렬·필터·무한 스크롤이 연결되고, 서버가 그룹 계층을 계산하는 서버사이드 row model(groupMode: 'server')도 지원합니다.

서버사이드 row model 데모 →

전부 확인할 수 있는 수치입니다

아래 숫자는 이 사이트를 만들 때 실제로 세어 넣은 값입니다 (버전 2.31.1 기준).

1,509개 단위 테스트 — 데이터 로직 전체가 DOM 없는 순수 함수로 분리되어 테스트됩니다 (전부 통과)
72개 기능별 라이브 데모 카드 — 화면에 보이는 소스가 곧 실행되는 소스입니다
279개 API 문서 항목 — 옵션·컬럼 속성·메서드·이벤트·렌더러·테마 토큰 전 항목
10,000행 실전 템플릿 예제 — 필터·선택·편집·CSV·다크 모드가 한 화면에서 함께 동작합니다

템플릿 데모 · 기능 데모 · API 문서

라이선스 — 갱신을 멈춰도 쓰던 버전은 영원히 당신 것

DataGrid는 서비스(도메인)당 연 라이선스입니다. 그리고 갱신을 멈춰도 라이선스 기간 중 받은 버전은 워터마크 없이 무기한 사용할 수 있습니다. 만료 후에는 새 버전 업데이트만 멈출 뿐, 운영 중인 시스템은 그대로 돌아갑니다. 약관 문구가 아니라 라이선스 키에 새겨진 실제 동작 방식입니다.

구매 전 검증은 평가판이 담당합니다 — 기능 제한·기간 제한 없이 전 기능이 동작하고, 워터마크 하나만 표시됩니다. 로컬 개발 환경(localhost · 127.0.0.1 · ::1 · file://)에서는 워터마크도 표시되지 않습니다. 사내 IP로 접속하는 개발 서버에는 워터마크가 표시되며, 운영 라이선스에 개발·스테이징 도메인 2개가 무상 포함됩니다.

이 사이트의 데모는 정품 키가 등록된 상태입니다 — 구매하시면 보이는 그대로입니다. 평가판 워터마크가 실제로 어떻게 보이는지는 라이선스 키 데모 카드에서 확인하실 수 있습니다. 그 카드 하나만 키 없음 / 잘못된 키 / 다른 도메인 키 / 유효한 키를 전환하며 워터마크를 그대로 보여줍니다.
가격 안내 보기 — 서비스당 연 100,000원 평가판 받기