Open-source React Data Grid for business applications
From large-scale virtualization to essential business data features.An open-source React Data Grid for building complex business UIs quickly and flexibly.
Install and start building in minutes.
npm i beautiful-gridApache-2.0 open source · Verify every feature with runnable examples and real source.
Verified benchmarks for production
Large datasets
01Bundle size
02Performance
03Feature breadth
04Why Choose BeautifulGrid
Proven performance and rich business features, freely available as an open-source solution.
An open-source license you can use freely without feature restrictions
Designed to fit naturally into React and TypeScript projects
Virtual scrolling keeps large datasets smooth and responsive
Business-ready editing, merge, filter, summary, pivot, frozen columns, and more
Core Features & Highlights
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 and checkbox editors, date and select plugins, 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.
Virtual Scroll Optimization
A dataset with 1M rows and 24 columns contains 24 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.
1M 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 41 runnable guidesLarge-scale exploration
Cell editing
UI integration
Query controls
Merged editing
Aggregation
Row selection
Data exploration
3-Step Guide
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" />AI-ready by design
A clear TypeScript API, task-focused runnable examples, and public documentation all share the same concepts and names. Coding agents can find the context they need and produce reviewable code without depending on a particular tool.
Merge cells by department and add a total row at the bottom.
const merge = {
columnsMap: {
0: { mergeBy: 'department' },
},
};
<BGrid
columns={columns}
data={rows}
cellMergeOptions={merge}
summary={summary}
/>Evaluation Checklist
BeautifulGrid publishes its React, Node.js, and browser baseline. The Apache-2.0 license and complete source let you verify how the grid can be operated and extended after adoption.
React ^19.2.0 · Node.js 24.x
A client component mounted in the browser.
Validate each screen against current stable Chrome, Edge, Safari, and Firefox.
Individuals and companies may use, modify, and distribute it commercially under the license terms.
Inspect the TypeScript source, issues, and change history on GitHub, then extend it for your project.
Open Source
If BeautifulGrid is useful for your project, consider giving us a star on GitHub. It helps the project grow.