오픈소스 · Apache-2.0
아름다운 기본 디자인으로 바로 시작하고, 편집·정렬·필터·병합·집계·피벗까지 업무에 필요한 데이터 기능을 React 방식으로 유연하게 확장하세요.
npm i beautiful-gridApache-2.0 오픈소스 · 모든 기능을 실행 예제와 실제 소스로 확인하세요.
대용량 데이터
550,000데이터 배열이 아니라 Chromium의 단일 스크롤 높이가 먼저 한계에 닿기 때문입니다.
15,950,030px/16,777,216px번들사이즈
59.5KiBPerformance
다양한 기능
50업무 흐름별 핵심 기능
그리드에서 자주 마주치는 문제를 대용량 탐색, 셀 편집, 조회와 선택, 구조화와 집계의 네 가지 흐름으로 나눠 실제 예제와 함께 정리했습니다.
가상 스크롤로 현재 보이는 행만 그리고, 고정 열로 기준 정보를 붙잡습니다. 화면 크기가 달라져도 넓고 긴 데이터를 끊김 없이 살펴볼 수 있습니다.
텍스트·날짜·선택 입력기를 바로 쓰거나 Ant Design 구성 요소를 연결할 수 있습니다. 유효성 검사와 키보드 이동까지 한 흐름으로 이어집니다.
여러 조건으로 정렬하고 값·텍스트·숫자를 필터링합니다. 검색과 행 선택 결과는 화면 안에서 처리하거나 서버 조회 조건으로 그대로 넘길 수 있습니다.
열 그룹과 셀 병합으로 구조를 드러내고, 요약 행과 피벗으로 필요한 수치를 모읍니다. 행·열 배치와 색상도 업무 기준에 맞게 조정할 수 있습니다.
가상 스크롤의 원리
55만 행 × 24열이면 셀은 모두 1,320만 개입니다. BeautifulGrid는 이를 한꺼번에 그리지 않고, 지금 보이는 약 20행 × 12열만 화면에 표시합니다.
셀이 그려지는 방식을 설명하기 위한 예시이며 속도 측정 결과는 아닙니다. 실제 성능은 셀 구성과 브라우저 환경에 따라 달라집니다.
550,000 행 × 24 열
그리드의 사각형 뷰포트 안에 필요한 셀만 그립니다.
직접 확인하는 기능
실제 그리드를 조작하고 구현 소스를 나란히 확인하세요. 필요한 업무 흐름부터 골라 프로젝트에 바로 연결할 수 있습니다.
실행 가이드 66개 모두 보기대용량 탐색
셀 편집
UI 연동
조회 조건
병합 편집
집계
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" />React에 맞춘 업무 그리드
컴포넌트와 상태 흐름은 React에 자연스럽게 맞추고, 가상 스크롤·편집·정렬·필터·선택·집계처럼 업무 화면에 필요한 기능은 하나의 그리드에 충실하게 담았습니다.
데이터와 선택, 편집 상태를 컴포넌트 흐름에 맞춰 제어합니다.
가상 스크롤부터 편집·정렬·필터·병합·요약까지 연결합니다.
렌더러와 편집 플러그인, CSS 변수로 화면의 문법을 유지합니다.
가상화와 서버 조회 흐름으로 화면에 필요한 범위만 처리합니다.
Excel 수식 엔진, Ribbon, 전용 디자이너까지 완전히 대체해야 한다면 별도 검토가 필요합니다.
프로젝트에 연결하기
Playground에서 열 구성과 스타일을 먼저 맞춰 보고, 실행 예제의 코드를 실제 프로젝트 흐름에 연결하세요.