예제 중심 통합 학습 가이드
실제 동작하는 라이브 DataGrid와 소스 코드, 그리고 실무 적용에 필요한 상세 설명을 한곳에서 확인하세요.
시작하기
3개 가이드시작하기 (Getting Started)
React 프로젝트에 BeautifulGrid를 설치하고 스타일, 데이터, 컬럼, 페이지 컨테이너를 연결해 첫 그리드를 실행합니다.
기본 DataGrid (Basic)
기본적인 컬럼 설정, 커스텀 셀 렌더러(itemRender), 좌측 열 고정(Frozen Columns), 행 클릭 이벤트 처리를 실무 예제로 학습합니다.
컨테이너 리사이즈 대응 (DataGridContainer)
ResizeObserver로 그리드 컨테이너의 실제 크기를 측정해, 레이아웃이 커지거나 작아져도 정확한 크기로 렌더링합니다.
데이터와 컬럼
6개 가이드데이터와 컬럼 정의 (Data & Columns)
TypeScript 제네릭을 활용한 안전한 컬럼 매핑, 점 표기법 중첩 키 접근, 폭(Width)과 정렬(Align) 규칙을 심층 분석합니다.
페이지네이션 (Pagination)
DataGrid 하단 푸터 바에 페이지 번호 네비게이션을 배치하고, 서버 측 페이징 API와 연동하는 방법을 학습합니다.
강력한 셀 확장 (itemRender)
itemRender로 Canvas 차트, 설비 부하 히트맵, 상태 게이지와 행 단위 액션을 한 Grid에 구성하는 실전 패턴을 설명합니다.
행 번호 (Line Number)
좌측 틀고정 영역에 행 순번(1, 2, 3...)을 표시하고 가상 스크롤과 자연스럽게 연동하는 방법을 학습합니다.
다중 정렬 (Sorting)
단일 컬럼 및 다중 컬럼(Multi-column) 정렬 규칙과 정렬 상태 제어(Controlled Sort)를 학습합니다.
대용량 가상 스크롤 (Virtual Scroll)
현재 viewport에 필요한 행을 중심으로 렌더링하는 가상 스크롤(Virtual Scrolling)의 원리와 적용 시 주의사항을 알아봅니다.
상호작용 및 편집
15개 가이드셀 편집 시작하기 (Cell Editing)
편집 가능 셀 선언부터 클릭·키보드 진입, IME, 저장·취소·이동까지 셀 편집의 기본 흐름을 설명합니다.
내장·기본 제공 에디터 (Built-in Editors)
내장 text와 기본 제공 Select·Date plugin의 설정, 값 변환, 아이콘 연결 방법을 설명합니다.
외부 에디터 플러그인 (Editor Plugins)
Ant Design과 앱 전용 입력 컴포넌트를 plugin으로 연결하고 popup portal, 다중 변경 commit, 종료 수명주기를 관리하는 방법을 설명합니다.
에디터 아이콘 (Editor Icons)
셀 값 옆에 드롭다운·달력·검색 아이콘을 표시하고 editor 시작 또는 독립 callback을 연결하는 방법을 설명합니다.
Autocomplete와 Lookup (Lookup Editor)
같은 셀에서 자동완성 입력과 lookup 모달 아이콘을 함께 제공하고 여러 컬럼 값을 원자적으로 저장하는 방법을 설명합니다.
편집 이벤트와 트랜잭션 (Editing Events)
editor 요청에서 onChangeValue 검증·보정, 다중 컬럼 commit, onChangeData 통지까지의 이벤트 흐름을 설명합니다.
병합 셀 편집 (Merged Cell Editing)
틀고정 없는 병합 셀과 frozen row·column 경계의 병합 셀을 편집하고 모든 실제 행을 함께 변경하는 규칙을 설명합니다.
셀 포커스와 키보드 이동 (Cell Navigation)
활성 셀을 제어하고 방향키, Tab, Home/End, PageUp/PageDown으로 이동하며 선택과 인라인 편집을 연결합니다.
행 선택 및 체크박스 (Checkbox & Radio Selection)
체크박스 다중 선택, 라디오 단일 선택, 전체 선택(Indeterminate) 및 제어 컴포넌트 상태 연동 방법을 학습합니다.
정렬 및 필터 툴박스 (Sorting & Filtering)
컬럼 헤더의 다중 정렬(Multi-sort)과 강력한 툴박스 필터링(Toolbox Filter)을 실무에 적용하는 방법을 학습합니다.
컬럼 순서 재배치 (Column Reorder)
마우스 드래그 앤 드롭으로 컬럼 헤더의 순서를 자유롭게 변경하고 변경된 순서를 저장하는 방법을 학습합니다.
행 순서 재배치 (Row Reorder)
행 좌측 핸들을 포인터나 키보드로 이동하고, 가상 스크롤·선택·병합 셀에서도 안전하게 순서를 저장하는 방법을 학습합니다.
그리드 검색 (Grid Search)
현재 로드된 표시 데이터의 셀을 검색하고 하이라이트, 이전·다음 이동, 우클릭 메뉴와 제어형 검색 UI를 구성합니다.
셀 컨텍스트 메뉴 구성 (Cell Context Menu)
본문 셀의 우클릭과 키보드 메뉴에 동적 항목, 아이콘, 구분선, 비활성 상태와 실행 callback을 구성합니다.
포커스 및 선택 (Focus & Active Row)
셀 클릭과 selectedRowKey를 연결해 현재 선택된 행을 시각적으로 강조하는 방법을 학습합니다.
고급 기능
5개 가이드셀 병합 (Cell Merge)
인접한 행의 동일한 데이터를 시각적으로 하나로 합쳐서 그룹화된 가독성 높은 보고서 테이블을 만드는 방법을 학습합니다.
합계 및 요약행 (Summary Row)
BGridProps의 summary 설정으로 상단 또는 하단에 사용자 정의 요약 셀을 표시하는 방법을 학습합니다.
피벗 크로스탭 (Pivot Table)
행 축, 컬럼 축과 집계 값을 BGridPivotOptions로 구성해 교차 집계 결과를 표시하는 방법을 학습합니다.
다단 그룹 헤더 (Column Groups)
컬럼 ID를 참조하는 트리로 3단 이상의 그룹 헤더를 만들고 고정 컬럼 경계에서도 안전하게 사용하는 방법을 학습합니다.
행·컬럼 틀고정 (Frozen Rows & Columns)
상단 주요 행과 좌측 주요 열을 고정하고 Summary Row와 함께 사용하는 방법을 학습합니다.
스타일과 접근성
6개 가이드로딩 및 빈 상태 (Loading & Empty State)
데이터 비동기 로딩 시 스피너 오버레이 표시 및 검색 결과가 없을 때의 안내 메시지 커스터마이징을 학습합니다.
조건부 행 스타일링 (Row Styling)
특정 조건(예: 결제 취소, 재고 부족, VIP 회원 등)을 만족하는 행에 커스텀 CSS 클래스를 동적으로 부여하는 방법을 학습합니다.
테마 및 스타일 커스터마이징 (Theming)
CSS 변수(--bgrid-*)를 오버라이드하여 라이트/다크 모드 및 기업 브랜드 컬러에 맞춘 커스텀 테마를 적용하는 방법을 학습합니다.
세로 구분선 (Variant)
variant prop으로 본문과 요약 셀의 세로 구분선 표시 여부를 전환하고 적용 범위를 확인합니다.
접근성 및 키보드 사용 (Accessibility & Keyboard)
최신 소스가 제공하는 셀 이동, 선택, 편집, 검색, 컨텍스트 메뉴와 행 재정렬 단축키를 기능별로 확인합니다.
스크롤바 설정 (Custom Scrollbar)
네이티브 브라우저 스크롤바와 OS에 종속되지 않는 커스텀 오버레이 스크롤바의 설정 및 도킹(Dock) 옵션을 학습합니다.