Open Source · Apache-2.0
Start with a beautiful default and scale to advanced editing, sorting, filtering, merging, aggregation, and pivoting—all designed to fit naturally into React.
npm i beautiful-gridApache-2.0 open source · Verify every feature with runnable examples and real source.
Large datasets
550,000Chromium’s single-scroll height limit is reached before the data array becomes the constraint.
15,950,030px/16,777,216pxBundle size
59.5KiBPerformance
Feature breadth
50Core capabilities by workflow
Common grid problems are organized into four workflows—large-scale exploration, cell editing, query and selection, and structured aggregation—with runnable examples.
Virtual scrolling renders only visible rows while frozen columns keep reference data in view. Explore wide, long datasets smoothly across screen sizes.
Use built-in text, date, and select editors or connect Ant Design components. Validation and keyboard movement stay in one flow.
Sort by multiple conditions and filter values, text, or numbers. Process search and selection locally or pass the query to a server.
Reveal structure with column groups and merged cells, then collect key figures with summary rows and pivots. Adjust layout and color to your workflow.
How virtual scrolling works
A 550,000 × 24 dataset contains 13.2 million cells. BeautifulGrid does not render them at once; it displays roughly the 20 × 12 cells currently visible.
This illustrates how cells are rendered; it is not a benchmark. Actual performance varies with cell composition and browser environment.
550,000 rows × 24 columns
Only cells needed inside the rectangular viewport are rendered.
Features you can run
Operate the real grid and inspect its source side by side. Start with the workflow you need and connect it directly to your project.
View all 66 runnable guidesLarge-scale exploration
Cell editing
UI integration
Query controls
Merged editing
Aggregation
Three-step quick start
Install the package, import the base CSS, and connect columns and row data to complete your first grid.
View the full installation guide$ 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: 'Customer', width: 180 },
];
const rows = [{ values: { id: 1, customer: 'AXISJ' } }];
<BGrid width={640} height={360} columns={columns} data={rows} rowKey="id" />A business grid made for React
Components and state follow React naturally, while virtual scrolling, editing, sorting, filtering, selection, and aggregation remain fully integrated in one grid.
Control data, selection, and editing state through component flow.
Connect virtual scrolling, editing, sort, filter, merge, and summary.
Preserve your visual language with renderers, editor plugins, and CSS variables.
Virtualization and server queries keep work scoped to the visible range.
If you need a complete replacement for Excel formulas, Ribbon, or a dedicated designer, review that requirement separately.
Connect it to your project
Tune columns and styles in the Playground, then connect runnable example code to your project workflow.