01
대용량 가상 스크롤
필요한 행만 렌더링해 데이터가 많아도 화면을 빠르게 유지합니다.
더보기엑셀처럼 풍부하게.
React답게 가볍게.
셀 편집과 키보드 이동부터 정렬·필터·열 고정·병합·요약·피벗까지. 복잡한 업무 데이터를 빠르게 다루고, 화면의 스타일에 맞춰 자유롭게 완성하세요.
npm i @axboot/datagrid고급 편집셀 편집과 키보드 이동
빠른 렌더링가상 스크롤로 필요한 행만
자유로운 스타일링CSS 변수와 DOM 기반 확장
핵심 기능
업무 데이터가 복잡해질수록,
그리드는 더 강력해야 합니다.
단순히 표를 렌더링하는 컴포넌트가 아닙니다. 편집과 선택, 조회와 집계까지 실제 업무 흐름을 자연스럽게 연결합니다.
기능 비교
표를 만드는 시간은 줄이고,
업무 흐름에 집중하세요.
업무 화면에서 반복되는 문제를 하나씩 해결하려면 구현과 상태 관리가 늘어납니다. AXBOOT DataGrid로 무엇이 달라지는지, 문제 중심으로 비교해 보세요.
| 업무에서 겪는 문제 | 직접 구현하면 | AXBOOT DataGrid를 쓰면 | 관련 가이드 |
|---|---|---|---|
| 대용량 목록이 느려짐 | 전체 행 렌더링과 스크롤 상태를 직접 최적화 | 화면에 보이는 행만 렌더링해 DOM 부담을 줄임 | 더보기 |
| 셀 편집 흐름이 복잡함 | 입력·저장·취소·이동 상태를 각각 연결 | 열별 입력기와 저장 흐름을 하나로 구성 | 더보기 |
| 조회 조건을 한곳에서 관리하기 어려움 | 헤더 UI와 조회 조건 상태를 따로 개발 | 정렬·필터 조건을 클라이언트·서버 조회에 연결 | 더보기 |
| 가로로 긴 표에서 기준 정보가 사라짐 | 고정 위치와 가로 스크롤을 직접 동기화 | 핵심 열을 고정한 채 나머지 데이터를 탐색 | 더보기 |
| 여러 항목을 선택·처리하기 번거로움 | 선택 상태와 전체 선택 규칙을 직접 관리 | 행 선택과 전체·부분 선택 상태를 일관되게 관리 | 더보기 |
| 반복 데이터의 요약과 집계가 복잡함 | 병합 규칙·집계 데이터·결과 UI를 따로 구현 | 병합·요약·피벗을 그리드 안에서 구성 | 더보기 |
| 화면마다 타입과 스타일 규칙이 흩어짐 | 타입과 스타일 규칙을 화면별로 따로 관리 | TypeScript API와 CSS 변수로 일관되게 확장 | 더보기 |
렌더링 예산
데이터는 크게,
렌더링은 작게.
가상 스크롤은 전체 목록이 아니라, 화면에 보이는 행과 열에만 렌더링 비용을 씁니다. 행과 열이 늘어날수록 이 차이는 더 커집니다.
전체 데이터1,000,000행 × 100열
브라우저 DOM약 20행 × 12열
실제로 렌더링하는 셀약 240개데이터 규모와 무관하게 화면 범위 중심
그리드 높이600px
행 높이30px
화면에 보이는 열12열
현재 렌더링약 240셀약 20행 × 12열
전체 데이터
10,000행 × 20열
전체 DOM 테이블200,000개데이터 셀을 모두 렌더링
AXBOOT DataGrid약 240개전체의 0.12%만 렌더링
전체 데이터
100,000행 × 50열
전체 DOM 테이블5,000,000개데이터 셀을 모두 렌더링
AXBOOT DataGrid약 240개전체의 0.0048%만 렌더링
전체 데이터
1,000,000행 × 100열
전체 DOM 테이블100,000,000개데이터 셀을 모두 렌더링
AXBOOT DataGrid약 240개전체의 0.00024%만 렌더링
이 수치는 렌더링 셀 수를 나타낸 예시입니다. 실제 시간은 셀 렌더러, 브라우저 환경, 데이터 생성·전송 방식에 따라 달라집니다.
1 / 1
빠른 시작
설치하고, 스타일을 불러온 뒤,
첫 번째 그리드를 만드세요.
columns와 data만 전달하면 바로 시작할 수 있습니다.
Terminalnpm
$ npm i @axboot/datagridmain.tsxTypeScript
import '@axboot/datagrid/style.css';
import { createRoot } from 'react-dom/client';
import App from './App';
createRoot(document.getElementById('root')!).render(<App />);Orders.tsxTypeScript
import { AXDataGrid } from '@axboot/datagrid';
export default function Orders() {
return (
<AXDataGrid
width={960}
height={480}
columns={columns}
data={rows}
/>
);
}왜 AXBOOT DataGrid인가
웹 엑셀의 풍부함을,
React 화면에 맞게.
스프레드시트처럼 복잡한 업무 흐름을 다루되, 화면 전체를 무겁게 만들 필요는 없습니다. AXBOOT DataGrid는 필요한 고급 기능, 빠른 렌더링, 자유로운 스타일링에 집중합니다.
✓
이런 화면에 적합합니다업무 데이터 편집, 운영 도구, 제품 고유의 스타일이 필요한 화면
!
이 기능이 필요하다면 확인해 보세요Excel 수식 호환, Ribbon, 전용 디자이너까지 필요한 경우
실제 업무 화면 만들기
이제, 실제 데이터로 시작하세요.
실행 예제를 살펴보고, Playground에서 열 구성과 테마를 직접 바꿔 보세요.