01 · FOUNDATION03
Ship your first grid
Install the package, connect data and columns, and establish a responsive grid surface.
CURATED LEARNING PATHS
Quick Start Guide
Each path connects the smallest useful set of guides, so you can learn a workflow without reading the entire catalog first.
02 · WORKFLOW03
Build confident interactions
Add keyboard navigation, cell editing, and production-ready editor patterns.
03 · PRODUCTION03
Prepare for real workloads
Tune large datasets, accessibility, and visual integration for a finished product.
01
Getting Started
Install, render, and understand the essential grid model.
01.01
Getting Started
Install BeautifulGrid in a React project, connect its styles, data, columns, and page container, and render your first grid.
01.02Live demo
Basic DataGrid
Learn basic column configuration, custom cell rendering with itemRender, frozen columns, alignment, and row click handling through a practical example.
01.03Live demo
Responsive Containers (DataGridContainer)
Measure the grid container with ResizeObserver so the DataGrid renders at the correct size as its layout grows or shrinks.
02
Data & Columns
Shape data, columns, grouping, and presentation rules.
02.01Live demo
Data and Columns
Explore type-safe column mapping with TypeScript generics, nested key paths, and the rules for column width and alignment.
02.02Live demo
Pagination
Place page-number navigation in the DataGrid footer and connect it to a server-side pagination API.
02.03Live demo
Powerful Cell Extensions (itemRender)
Build Canvas charts, facility-load heatmaps, status gauges, and row-level actions in one grid with itemRender.
02.04Live demo
Line Numbers
Display sequential row numbers in the frozen area on the left and keep them aligned with virtual scrolling.
02.05Live demo
Sorting
Learn single-column and multi-column sorting rules and how to manage sorting as controlled state.
02.06Live demo
Data Export (Export CSV, Excel & Data)
Export displayed data, checked rows, or full source data to Excel (.xlsx) or CSV without external dependencies, or extract a logical model for external libraries.
02.07Live demo
Large-Data Virtual Scroll
Understand how virtual scrolling renders rows around the current viewport and the constraints to consider when applying it to large datasets.
02.08Live demo
Variable Row Height
Use getRowHeight to assign data-driven row heights while preserving virtual-scroll performance.
03
Interaction & Editing
Build selection, navigation, editing, and user workflows.
03.01Live demo
Cell Editing
Learn the core cell-editing flow, from declaring editable cells and entering by pointer or keyboard to IME input, save, cancel, and movement.
03.02Live demo
Built-in Editors
Configure the built-in text and checkbox editors and the provided Select and Date plugins, including header controls, value conversion, and editor icons.
03.03Live demo
Editor Icons
Display dropdown, calendar, and search icons beside cell values and connect them to editor activation or an independent callback.
03.04Live demo
Autocomplete and Lookup
Combine autocomplete input and a lookup-modal icon in one cell, then commit values to multiple columns atomically.
03.05Live demo
Editing Events and Transactions
Understand the editing event flow from an editor request through onChangeValue validation and normalization, multi-column commits, and onChangeData notifications.
03.06Live demo
Merged Cell Editing
Learn how editing works for merged cells in normal layouts and across frozen row and column boundaries, including atomic updates to every underlying row.
03.07Live demo
Cell Navigation
Control the active cell, navigate with Arrow keys, Tab, Home/End, and PageUp/PageDown, and connect navigation to selection and inline editing.
03.08Live demo
Checkbox & Radio Selection
Learn checkbox multi-selection, radio single-selection, select-all indeterminate state, and controlled selection state.
03.09Live demo
Sorting and Filtering Toolbox
Apply multi-column sorting and header-toolbox filtering to practical data exploration workflows.
03.10Live demo
Column Reorder
Learn how to rearrange column headers with drag and drop and persist the resulting order.
03.11Live demo
Column Visibility
Hide columns from the header toolbox, restore them from another column menu, or show every hidden column at once.
03.12Live demo
Row Reorder
Move rows by pointer or keyboard from the handle on the left and safely persist the order with virtual scrolling, selection, and merged cells.
03.13Live demo
Grid Search
Search cells across the currently loaded visible data and configure highlighting, previous and next navigation, context-menu entry points, and a controlled search UI.
03.14Live demo
Cell Context Menu
Configure dynamic items, icons, separators, disabled states, and action callbacks for pointer and keyboard context menus on body cells.
03.15Live demo
Focus and Active Row
Connect cell clicks to selectedRowKey and visually highlight the currently selected row.
03.16Live demo
Disabled State
Lock DataGrid UI interactions such as click, selection, editing, sorting, filtering, context menus, and pagination while work is in progress.
04
Advanced Features
Handle scale, summaries, pivoting, and complex layouts.
04.01Live demo
Cell Merge
Learn how to visually merge identical values in adjacent rows to create readable, grouped report tables.
04.02Live demo
Summary Row
Use the BGridProps summary configuration to display custom summary cells above or below the data rows.
04.03Live demo
Pivot Table
Configure row axes, column axes, and aggregate values with BGridPivotOptions to display a cross-tab result.
04.04Live demo
Column Groups
Create group headers with three or more levels from a tree of column IDs, and use them safely across frozen-column boundaries.
04.05Live demo
Frozen Rows & Columns
Learn how to freeze important rows at the top and columns on the left, including use with a Summary Row.
04.06Live demo
Tree Folding
Render flat parent-key data as a hierarchy and safely expand or collapse rows.
04.07Live demo
Master-Detail
Expand grid rows to reveal nested subgrids, forms, or detail panels spanning the full width with complete event isolation.
05
Styling & Accessibility
Finish the experience with themes and accessible behavior.
05.01Live demo
Loading & Empty State
Show a spinner overlay while data loads and customize the message displayed when no rows or search results are available.
05.02Live demo
Row Styling
Dynamically assign custom CSS classes to rows that meet business conditions such as canceled payments, low inventory, or VIP membership.
05.03Live demo
Theming and Style Customization
Override --bgrid-* CSS variables to apply light, dark, and brand-specific themes.
05.04Live demo
Vertical Dividers (Variant)
Use the variant prop to toggle vertical dividers in body and summary cells and understand exactly where the setting applies.
05.05
Accessibility & Keyboard
Review the keyboard shortcuts currently available for cell navigation, selection, editing, search, context menus, row selection, and row reordering.
05.06Live demo
Custom Scrollbar
Configure native browser scrollbars or OS-independent custom overlay scrollbars, including the available dock options.
No matching guides found
Try a feature name such as editing, selection, columns, or styling.