01 · FOUNDATION03
첫 그리드 완성하기
패키지를 설치하고 데이터와 컬럼을 연결해 반응형 그리드 화면을 완성합니다.
CURATED LEARNING PATHS
Quick Start Guide
전체 문서를 순서대로 읽지 않아도 됩니다. 지금 만들고 싶은 결과에 꼭 필요한 가이드만 연결했습니다.
02 · WORKFLOW03
업무 상호작용 설계하기
키보드 탐색, 셀 편집과 실전 에디터 패턴을 자연스러운 흐름으로 연결합니다.
03 · PRODUCTION03
운영 환경 준비하기
대용량 데이터, 접근성, 테마를 점검해 제품 수준의 그리드로 다듬습니다.
01
시작하기
설치부터 첫 렌더링까지 핵심 구조를 익힙니다.
01.01
시작하기 (Getting Started)
React 프로젝트에 BeautifulGrid를 설치하고 스타일, 데이터, 컬럼, 페이지 컨테이너를 연결해 첫 그리드를 실행합니다.
01.02라이브 데모
기본 DataGrid (Basic)
기본적인 컬럼 설정, 커스텀 셀 렌더러(itemRender), 좌측 열 고정(Frozen Columns), 행 클릭 이벤트 처리를 실무 예제로 학습합니다.
01.03라이브 데모
컨테이너 리사이즈 대응 (DataGridContainer)
ResizeObserver로 그리드 컨테이너의 실제 크기를 측정해, 레이아웃이 커지거나 작아져도 정확한 크기로 렌더링합니다.
02
데이터와 컬럼
데이터와 컬럼, 그룹 및 표현 규칙을 설계합니다.
02.01라이브 데모
데이터와 컬럼 정의 (Data & Columns)
TypeScript 제네릭을 활용한 안전한 컬럼 매핑, 점 표기법 중첩 키 접근, 폭(Width)과 정렬(Align) 규칙을 심층 분석합니다.
02.02라이브 데모
페이지네이션 (Pagination)
DataGrid 하단 푸터 바에 페이지 번호 네비게이션을 배치하고, 서버 측 페이징 API와 연동하는 방법을 학습합니다.
02.03라이브 데모
강력한 셀 확장 (itemRender)
itemRender로 Canvas 차트, 설비 부하 히트맵, 상태 게이지와 행 단위 액션을 한 Grid에 구성하는 실전 패턴을 설명합니다.
02.04라이브 데모
행 번호 (Line Number)
좌측 틀고정 영역에 행 순번(1, 2, 3...)을 표시하고 가상 스크롤과 자연스럽게 연동하는 방법을 학습합니다.
02.05라이브 데모
다중 정렬 (Sorting)
단일 컬럼 및 다중 컬럼(Multi-column) 정렬 규칙과 정렬 상태 제어(Controlled Sort)를 학습합니다.
02.06라이브 데모
데이터 내보내기 (Export CSV, Excel & Data)
외부 의존성 없이 현재 화면 데이터, 체크된 행, 원본 데이터를 Excel(.xlsx)이나 CSV로 다운로드하거나 외부 라이브러리 연동용 논리 모델을 추출합니다.
02.07라이브 데모
대용량 가상 스크롤 (Virtual Scroll)
현재 viewport에 필요한 행을 중심으로 렌더링하는 가상 스크롤(Virtual Scrolling)의 원리와 적용 시 주의사항을 알아봅니다.
02.08라이브 데모
가변 행 높이 (Variable Row Height)
getRowHeight로 데이터에 따라 행 높이를 지정하면서 가상 스크롤 성능을 유지하는 방법을 알아봅니다.
03
상호작용 및 편집
선택·탐색·편집을 자연스러운 업무 흐름으로 연결합니다.
03.01라이브 데모
셀 편집 시작하기 (Cell Editing)
편집 가능 셀 선언부터 클릭·키보드 진입, IME, 저장·취소·이동까지 셀 편집의 기본 흐름을 설명합니다.
03.02라이브 데모
내장·기본 제공 에디터 (Built-in Editors)
내장 text·checkbox와 기본 제공 Select·Date plugin의 설정, 값 변환, 헤더 제어와 아이콘 연결 방법을 설명합니다.
03.03라이브 데모
에디터 아이콘 (Editor Icons)
셀 값 옆에 드롭다운·달력·검색 아이콘을 표시하고 editor 시작 또는 독립 callback을 연결하는 방법을 설명합니다.
03.04라이브 데모
Autocomplete와 Lookup (Lookup Editor)
같은 셀에서 자동완성 입력과 lookup 모달 아이콘을 함께 제공하고 여러 컬럼 값을 원자적으로 저장하는 방법을 설명합니다.
03.05라이브 데모
편집 이벤트와 트랜잭션 (Editing Events)
editor 요청에서 onChangeValue 검증·보정, 다중 컬럼 commit, onChangeData 통지까지의 이벤트 흐름을 설명합니다.
03.06라이브 데모
병합 셀 편집 (Merged Cell Editing)
틀고정 없는 병합 셀과 frozen row·column 경계의 병합 셀을 편집하고 모든 실제 행을 함께 변경하는 규칙을 설명합니다.
03.07라이브 데모
셀 포커스와 키보드 이동 (Cell Navigation)
활성 셀을 제어하고 방향키, Tab, Home/End, PageUp/PageDown으로 이동하며 선택과 인라인 편집을 연결합니다.
03.08라이브 데모
행 선택 및 체크박스 (Checkbox & Radio Selection)
체크박스 다중 선택, 라디오 단일 선택, 전체 선택(Indeterminate) 및 제어 컴포넌트 상태 연동 방법을 학습합니다.
03.09라이브 데모
정렬 및 필터 툴박스 (Sorting & Filtering)
컬럼 헤더의 다중 정렬(Multi-sort)과 강력한 툴박스 필터링(Toolbox Filter)을 실무에 적용하는 방법을 학습합니다.
03.10라이브 데모
컬럼 순서 재배치 (Column Reorder)
마우스 드래그 앤 드롭으로 컬럼 헤더의 순서를 자유롭게 변경하고 변경된 순서를 저장하는 방법을 학습합니다.
03.11라이브 데모
컬럼 숨김과 복구 (Column Visibility)
헤더 툴박스에서 컬럼을 숨기고, 다른 컬럼 메뉴에서 다시 표시하거나 전체 복구하는 방법을 설명합니다.
03.12라이브 데모
행 순서 재배치 (Row Reorder)
행 좌측 핸들을 포인터나 키보드로 이동하고, 가상 스크롤·선택·병합 셀에서도 안전하게 순서를 저장하는 방법을 학습합니다.
03.13라이브 데모
그리드 검색 (Grid Search)
현재 로드된 표시 데이터의 셀을 검색하고 하이라이트, 이전·다음 이동, 우클릭 메뉴와 제어형 검색 UI를 구성합니다.
03.14라이브 데모
셀 컨텍스트 메뉴 구성 (Cell Context Menu)
본문 셀의 우클릭과 키보드 메뉴에 동적 항목, 아이콘, 구분선, 비활성 상태와 실행 callback을 구성합니다.
03.15라이브 데모
포커스 및 선택 (Focus & Active Row)
셀 클릭과 selectedRowKey를 연결해 현재 선택된 행을 시각적으로 강조하는 방법을 학습합니다.
03.16라이브 데모
그리드 비활성화 (Disabled State)
작업 처리 중 DataGrid의 클릭, 선택, 편집, 정렬, 필터, 컨텍스트 메뉴, 페이징 등 UI 상호작용을 한 번에 잠그는 방법을 학습합니다.
04
고급 기능
대용량 처리, 요약, 피벗과 복합 레이아웃을 다룹니다.
04.01라이브 데모
셀 병합 (Cell Merge)
인접한 행의 동일한 데이터를 시각적으로 하나로 합쳐서 그룹화된 가독성 높은 보고서 테이블을 만드는 방법을 학습합니다.
04.02라이브 데모
합계 및 요약행 (Summary Row)
BGridProps의 summary 설정으로 상단 또는 하단에 사용자 정의 요약 셀을 표시하는 방법을 학습합니다.
04.03라이브 데모
피벗 크로스탭 (Pivot Table)
행 축, 컬럼 축과 집계 값을 BGridPivotOptions로 구성해 교차 집계 결과를 표시하는 방법을 학습합니다.
04.04라이브 데모
다단 그룹 헤더 (Column Groups)
컬럼 ID를 참조하는 트리로 3단 이상의 그룹 헤더를 만들고 고정 컬럼 경계에서도 안전하게 사용하는 방법을 학습합니다.
04.05라이브 데모
행·컬럼 틀고정 (Frozen Rows & Columns)
상단 주요 행과 좌측 주요 열을 고정하고 Summary Row와 함께 사용하는 방법을 학습합니다.
04.06라이브 데모
트리 폴딩 (Tree Folding)
평면 데이터의 부모 키 관계를 트리로 표시하고 행을 안전하게 접고 펼치는 방법을 설명합니다.
04.07라이브 데모
마스터-디테일 (Master-Detail)
그리드 행을 펼쳐 중첩된 서브 그리드나 폼, 상세 뷰를 전체 너비로 표시하고 이벤트를 안전하게 격리하는 방법을 설명합니다.
05
스타일과 접근성
테마와 접근성으로 제품의 완성도를 높입니다.
05.01라이브 데모
로딩 및 빈 상태 (Loading & Empty State)
데이터 비동기 로딩 시 스피너 오버레이 표시 및 검색 결과가 없을 때의 안내 메시지 커스터마이징을 학습합니다.
05.02라이브 데모
조건부 행 스타일링 (Row Styling)
특정 조건(예: 결제 취소, 재고 부족, VIP 회원 등)을 만족하는 행에 커스텀 CSS 클래스를 동적으로 부여하는 방법을 학습합니다.
05.03라이브 데모
테마 및 스타일 커스터마이징 (Theming)
CSS 변수(--bgrid-*)를 오버라이드하여 라이트/다크 모드 및 기업 브랜드 컬러에 맞춘 커스텀 테마를 적용하는 방법을 학습합니다.
05.04라이브 데모
세로 구분선 (Variant)
variant prop으로 본문과 요약 셀의 세로 구분선 표시 여부를 전환하고 적용 범위를 확인합니다.
05.05
접근성 및 키보드 사용 (Accessibility & Keyboard)
최신 소스가 제공하는 셀 이동, 선택, 편집, 검색, 컨텍스트 메뉴와 행 재정렬 단축키를 기능별로 확인합니다.
05.06라이브 데모
스크롤바 설정 (Custom Scrollbar)
네이티브 브라우저 스크롤바와 OS에 종속되지 않는 커스텀 오버레이 스크롤바의 설정 및 도킹(Dock) 옵션을 학습합니다.
일치하는 가이드가 없습니다
편집, 선택, 컬럼, 스타일처럼 다른 기능 이름으로 검색해 보세요.