01권장
데스크톱 업무 화면
ChromeMicrosoft EdgeSafariFirefox
최신 안정 버전을 권장합니다. 키보드 이동과 다중 셀 편집처럼 밀도 높은 업무 흐름은 실제 사용자 브라우저에서 검증하세요.
Runtime baseline · v1.12.0-rc.0
도입 전에,
실행 환경부터 맞추세요.
AXBOOT DataGrid는 React 업무 화면을 위한 클라이언트 렌더링 컴포넌트입니다. 런타임부터 브라우저, 배포 조건까지 실제 프로젝트에 필요한 기준만 정리했습니다.
React19.2.x
React DOM과 함께 사용
Node.js22.12 이상
개발·빌드 기준
브라우저최신 안정판
표준 DOM API 기준
렌더링Client only
브라우저에서 마운트
권장 브라우저 · Browser strategy
최신 브라우저를 기준으로,
화면별로 검증합니다.
가상 스크롤과 셀 상호작용에는 표준 DOM·CSS 기능이 사용됩니다. 오래된 버전을 폭넓게 보장하기보다 실제 사용 환경의 최신 안정판을 기준으로 확인하세요.
02화면별 검증
모바일·태블릿
iOS SafariChrome for Android
조회, 선택, 간단한 편집은 최신 모바일 브라우저에서 확인할 수 있습니다. 대량 편집 화면은 데스크톱 환경을 권장합니다.
03별도 검토
레거시·제한 환경
Internet Explorer사내 레거시 브라우저강한 보안 정책 환경
지원 대상으로 삼지 않습니다. ResizeObserver, Pointer Events, CSS 변수, structuredClone과 폴리필 정책을 먼저 확인하세요.
Development & deployment
React 프로젝트에
가볍게 연결합니다.
TypeScript 타입, ESM·CommonJS 모듈, 별도 스타일시트를 제공합니다. 타입 안전한 열과 행 구성을 위해 TypeScript 사용을 권장합니다.
npm install @axboot/datagrid npmPRODUCTION CHECKLIST4 / 4
01
스타일 로드패키지의 style.css를 한 번 불러와 기본 레이아웃과 테마 변수를 적용합니다.
02
그리드 영역 크기그리드를 감싸는 영역에 너비와 높이를 지정합니다. 가상 스크롤은 이 뷰포트를 기준으로 동작합니다.
03
클라이언트 렌더링SSR 프레임워크에서는 DataGrid를 브라우저에서만 마운트합니다. 서버 렌더 단계에서 DOM API를 호출하지 않도록 분리하세요.
04
화면별 검증사용할 itemRender, 편집기, 드래그·선택 흐름을 실제 데이터 양과 목표 브라우저에서 함께 테스트합니다.
Product scope
잘하는 일과,
확인할 경계를 나눴습니다.
편집·탐색·집계가 이어지는 React 업무 흐름에 집중합니다. 아래 범위와 제약을 프로젝트 요구사항에 맞춰 확인하세요.
INCLUDED
10기본 제공 기능
가상 스크롤업무 화면의 데이터 흐름에 맞게 구성할 수 있습니다.
셀 편집업무 화면의 데이터 흐름에 맞게 구성할 수 있습니다.
셀 포커스와 키보드 이동업무 화면의 데이터 흐름에 맞게 구성할 수 있습니다.
정렬과 필터업무 화면의 데이터 흐름에 맞게 구성할 수 있습니다.
고정 열업무 화면의 데이터 흐름에 맞게 구성할 수 있습니다.
선택과 체크업무 화면의 데이터 흐름에 맞게 구성할 수 있습니다.
셀 병합과 Summary업무 화면의 데이터 흐름에 맞게 구성할 수 있습니다.
Pivot업무 화면의 데이터 흐름에 맞게 구성할 수 있습니다.
CSS 변수 테마업무 화면의 데이터 흐름에 맞게 구성할 수 있습니다.
DOM 렌더링 장점접근성, CSS 커스터마이징, 브라우저 기본 기능 호환
CHECK FIRST
도입 전 확인할 범위
01
Excel 수식 엔진
Excel과 동일한 수식 평가 엔진은 제공하지 않음
02
전용 Designer/Ribbon
UI 디자이너나 리본 툴바 미제공
03
라이선스와 배포
현재 라이선스와 상업적 사용 조건은 확정 전입니다. 외부 배포 전 LICENSE ↗와 배포 정책을 확인하세요.
Ready to validate?
실제 데이터로
도입 가능성을 확인하세요.
기능을 추측하는 대신 Playground와 실행 예제에서 목표 데이터, 편집기, 브라우저 조합을 직접 검증할 수 있습니다.