대용량 데이터
01대용량 가상 스크롤
지원 버전v1.0.3+기본 행 높이29px실행 예제첫 행 → 100만행지원가능 범위천만행 이하 권장
실행 예제는 100만행의 첫 행부터 마지막 행까지 확인했으며, 논리 스크롤 좌표는 천만행까지 검증했습니다. 실제 적재 가능 행 수는 데이터 크기와 브라우저 메모리에 따라 달라집니다.업무용 애플리케이션을 위한 오픈소스 React Data Grid
아름답게, 강력하게.
React로 자연스럽게.
대용량 가상화부터 실무에 필요한 데이터 기능까지.복잡한 비즈니스 UI를 빠르고 유연하게 구축하는 오픈소스 React Data Grid입니다.
데이터 그리드 불러오는 중
프로덕션 환경을 위한 검증된 지표
100만행
번들사이즈
02초기 JS + CSS 합산 gzip
JavaScript54.4 KiBCSS8.2 KiB
React 제외 · gzip level 9 측정Performance
03스크롤60fps초기 마운트56.6ms
스크롤과 첫 화면 표시를 함께 측정
1440×1000 · 72행 · 스크롤 5회 중앙값 · 마운트 현재 로드다양한 기능
04기능별 실행 가이드
편집부터 집계까지, 실제 예제와 소스로 바로 확인합니다.선택해야 하는 이유
왜 BeautifulGrid인가요?
검증된 성능과 풍부한 실무 기능을 누구나 자유롭게 활용할 수 있는 오픈소스로 제공합니다.
Apache-2.0
기능 제한 없이 자유롭게 사용할 수 있는 오픈소스 라이선스
React에 최적화
React와 TypeScript를 기반으로 자연스럽게 사용할 수 있도록 설계
대용량 데이터에 최적화
가상 스크롤을 기반으로 대용량 데이터도 부드럽게 처리
업무에 필요한 기능
편집, 병합, 필터, 요약, 피벗, 고정 열 등 업무 시스템에 필요한 기능 제공
핵심 기능 및 특징
4가지 핵심 경험
그리드에서 자주 마주치는 문제를 대용량 탐색, 셀 편집, 조회와 선택, 구조화와 집계의 네 가지 흐름으로 나눠 실제 예제와 함께 정리했습니다.
100만행도 필요한 만큼만 그려 빠르게 살펴봅니다.
가상 스크롤로 현재 보이는 행만 그리고, 고정 열로 기준 정보를 붙잡습니다. 화면 크기가 달라져도 넓고 긴 데이터를 끊김 없이 살펴볼 수 있습니다.
현재 화면에 필요한 셀만 렌더링
셀에서 입력하고 저장한 뒤, 다음 칸으로 바로 이동합니다.
텍스트·체크박스·날짜·선택 입력기를 바로 쓰거나 Ant Design 구성 요소를 연결할 수 있습니다. 유효성 검사와 키보드 이동까지 한 흐름으로 이어집니다.
입력·검증·저장·이동을 한 번에 처리
정렬·필터로 찾고, 선택한 행을 다음 업무로 넘깁니다.
여러 조건으로 정렬하고 값·텍스트·숫자를 필터링합니다. 검색과 행 선택 결과는 화면 안에서 처리하거나 서버 조회 조건으로 그대로 넘길 수 있습니다.
조회 조건과 선택 상태를 한곳에서 관리
반복 항목은 묶고, 숫자는 한눈에 읽히게 집계합니다.
열 그룹과 셀 병합으로 구조를 드러내고, 요약 행과 피벗으로 필요한 수치를 모읍니다. 행·열 배치와 색상도 업무 기준에 맞게 조정할 수 있습니다.
업무 기준에 맞춘 묶음·집계·표현
가상 스크롤 최적화
화면에 필요한 셀만 렌더링
100만행 × 24열이면 셀은 모두 2,400만 개입니다. BeautifulGrid는 이를 한꺼번에 그리지 않고, 지금 보이는 약 20행 × 12열만 화면에 표시합니다.
셀이 그려지는 방식을 설명하기 위한 예시이며 속도 측정 결과는 아닙니다. 실제 성능은 셀 구성과 브라우저 환경에 따라 달라집니다.
전체 데이터 공간2,400만셀
100만행 × 24열
그리드의 사각형 뷰포트 안에 필요한 셀만 그립니다.
직접 확인하는 기능
실행 가이드 & 예제
실제 그리드를 조작하고 구현 소스를 나란히 확인하세요. 필요한 업무 흐름부터 골라 프로젝트에 바로 연결할 수 있습니다.
실행 가이드 34개 모두 보기3단계 가이드
설치 및 빠른 시작
패키지를 설치하고 기본 CSS를 불러온 뒤, 열과 행 데이터만 연결하면 첫 그리드가 완성됩니다.
전체 설치 가이드 보기$ npm i beautiful-gridimport 'beautiful-grid/style.css';
// Your application entry
createRoot(document.getElementById('root')!).render(<App />);import { BGrid, type BGridColumn } from 'beautiful-grid';
type Order = { id: number; customer: string };
const columns: BGridColumn<Order>[] = [
{ key: 'id', label: 'ID', width: 80 },
{ key: 'customer', label: '고객', width: 180 },
];
const rows = [{ values: { id: 1, customer: 'AXISJ' } }];
<BGrid width={640} height={360} columns={columns} data={rows} rowKey="id" />AI 친화적 설계
AI와 함께 개발하기 좋은 React Data Grid
요구사항에서 구현까지, 맥락이 끊기지 않도록.
명확한 TypeScript API와 목적별 실행 예제, 공개된 문서가 같은 개념과 이름을 사용합니다. 특정 도구에 기대지 않아도 코딩 에이전트가 필요한 맥락을 찾고 검토 가능한 코드로 이어갈 수 있습니다.
요구사항
부서별로 셀을 병합하고, 맨 아래에 합계 행을 추가해줘.
TBGridColumn<Order>타입 계약→EcellMergeOptions실행 예제→DSummary공개 문서
검토 가능한 결과
✓ 타입 확인✓ 예제 추적
const merge = {
columnsMap: {
0: { mergeBy: 'department' },
},
};
<BGrid
columns={columns}
data={rows}
cellMergeOptions={merge}
summary={summary}
/>도입 전 체크포인트
지원 환경 및 라이선스
BeautifulGrid가 동작하는 React·Node.js·브라우저 기준을 공개하고, Apache-2.0 라이선스와 전체 소스를 통해 도입 이후의 운영과 확장까지 직접 확인할 수 있습니다.
React · Node.js 기준
React ^19.2.0 · Node.js 22.x
브라우저에서 마운트하는 클라이언트 컴포넌트입니다.
최신 안정 브라우저 지원
Chrome, Edge, Safari, Firefox 최신 안정판을 기준으로 화면별 동작을 검증합니다.
Apache-2.0 오픈소스
개인과 기업 모두 라이선스 조건에 따라 상업적 사용, 수정과 배포가 가능합니다.
공개된 소스와 개발 과정
TypeScript 소스, 이슈와 변경 이력을 GitHub에서 직접 확인하고 프로젝트에 맞게 확장할 수 있습니다.
Open Source
Like BeautifulGrid?
BeautifulGrid가 프로젝트에 도움이 되셨다면 GitHub Star로 응원해주세요. 더 좋은 오픈소스를 만드는 데 큰 도움이 됩니다.