Learn BeautifulGrid through working examples
Explore live DataGrid demos, copy-ready source code, and practical implementation guidance in one place.
Getting Started
3 guidesGetting Started
Install BeautifulGrid in a React project, connect its styles, data, columns, and page container, and render your first grid.
Basic DataGrid
Learn basic column configuration, custom cell rendering with itemRender, frozen columns, alignment, and row click handling through a practical example.
Responsive Containers (DataGridContainer)
Measure the grid container with ResizeObserver so the DataGrid renders at the correct size as its layout grows or shrinks.
Data & Columns
6 guidesData and Columns
Explore type-safe column mapping with TypeScript generics, nested key paths, and the rules for column width and alignment.
Pagination
Place page-number navigation in the DataGrid footer and connect it to a server-side pagination API.
Powerful Cell Extensions (itemRender)
Build Canvas charts, facility-load heatmaps, status gauges, and row-level actions in one grid with itemRender.
Line Numbers
Display sequential row numbers in the frozen area on the left and keep them aligned with virtual scrolling.
Sorting
Learn single-column and multi-column sorting rules and how to manage sorting as controlled state.
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.
Interaction & Editing
15 guidesCell Editing
Learn the core cell-editing flow, from declaring editable cells and entering by pointer or keyboard to IME input, save, cancel, and movement.
Built-in Editors
Configure the built-in text editor and the provided Select and Date plugins, including value parsing, formatting, and editor icons.
External Editor Plugins
Connect Ant Design or application-specific inputs as editor plugins and manage popup portals, multi-value commits, and the editor lifecycle.
Editor Icons
Display dropdown, calendar, and search icons beside cell values and connect them to editor activation or an independent callback.
Autocomplete and Lookup
Combine autocomplete input and a lookup-modal icon in one cell, then commit values to multiple columns atomically.
Editing Events and Transactions
Understand the editing event flow from an editor request through onChangeValue validation and normalization, multi-column commits, and onChangeData notifications.
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.
Cell Navigation
Control the active cell, navigate with Arrow keys, Tab, Home/End, and PageUp/PageDown, and connect navigation to selection and inline editing.
Checkbox & Radio Selection
Learn checkbox multi-selection, radio single-selection, select-all indeterminate state, and controlled selection state.
Sorting and Filtering Toolbox
Apply multi-column sorting and header-toolbox filtering to practical data exploration workflows.
Column Reorder
Learn how to rearrange column headers with drag and drop and persist the resulting order.
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.
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.
Cell Context Menu
Configure dynamic items, icons, separators, disabled states, and action callbacks for pointer and keyboard context menus on body cells.
Focus and Active Row
Connect cell clicks to selectedRowKey and visually highlight the currently selected row.
Advanced Features
5 guidesCell Merge
Learn how to visually merge identical values in adjacent rows to create readable, grouped report tables.
Summary Row
Use the BGridProps summary configuration to display custom summary cells above or below the data rows.
Pivot Table
Configure row axes, column axes, and aggregate values with BGridPivotOptions to display a cross-tab result.
Column Groups
Create group headers with three or more levels from a tree of column IDs, and use them safely across frozen-column boundaries.
Frozen Rows & Columns
Learn how to freeze important rows at the top and columns on the left, including use with a Summary Row.
Styling & Accessibility
6 guidesLoading & Empty State
Show a spinner overlay while data loads and customize the message displayed when no rows or search results are available.
Row Styling
Dynamically assign custom CSS classes to rows that meet business conditions such as canceled payments, low inventory, or VIP membership.
Theming and Style Customization
Override --bgrid-* CSS variables to apply light, dark, and brand-specific themes.
Vertical Dividers (Variant)
Use the variant prop to toggle vertical dividers in body and summary cells and understand exactly where the setting applies.
Accessibility & Keyboard
Review the keyboard shortcuts currently available for cell navigation, selection, editing, search, context menus, row selection, and row reordering.
Custom Scrollbar
Configure native browser scrollbars or OS-independent custom overlay scrollbars, including the available dock options.