01Recommended
Desktop workspaces
ChromeMicrosoft EdgeSafariFirefox
Use the latest stable release. Validate dense workflows such as keyboard navigation and multi-cell editing in your users’ actual browsers.
Runtime baseline · v1.0.0-rc.1
Before adoption,
align the runtime baseline.
BeautifulGrid is a client-rendered component for React business applications. This page focuses on the runtime, browser, and deployment conditions a real project needs.
React19.2.x
Use with React DOM
Node.js22.12 or newer
Development and build baseline
BrowserLatest stable
Standard DOM API baseline
RenderingClient only
Mounted in the browser
Recommended browsers · Strategy
Use current browsers,
then validate each screen.
Virtual scrolling and cell interactions use standard DOM and CSS capabilities. Target the latest stable release in the real environment instead of broadly promising old versions.
02Verify per screen
Mobile and tablet
iOS SafariChrome for Android
Querying, selection, and simple editing work in current mobile browsers. Use desktop environments for large editing workflows.
03Review separately
Legacy and restricted environments
Internet ExplorerInternal legacy browsersStrict security-policy environments
These are not supported targets. Review ResizeObserver, Pointer Events, CSS variables, structuredClone, and your polyfill policy first.
Development & deployment
Connect cleanly to
a React project.
The package provides TypeScript types, ESM and CommonJS modules, and a separate stylesheet. TypeScript is recommended for type-safe columns and rows.
npm install beautiful-grid npmPRODUCTION CHECKLIST4 / 4
01
Load stylesImport the package style.css once to apply the base layout and theme variables.
02
Size the grid viewportGive the grid container an explicit width and height. Virtual scrolling uses this viewport.
03
Client renderingIn SSR frameworks, mount DataGrid only in the browser and keep DOM API calls out of server rendering.
04
Validate each screenTest itemRender, editors, drag, and selection with production-like data volumes in target browsers.
Product scope
Separate strengths
from boundaries to review.
BeautifulGrid focuses on React workflows that connect editing, exploration, and aggregation. Review the scope and limitations against your project requirements.
INCLUDED
10Included capabilities
Virtual ScrollConfigure it around the data flow of your application.
Cell EditingConfigure it around the data flow of your application.
Cell Focus & Keyboard NavigationConfigure it around the data flow of your application.
Sorting & FilteringConfigure it around the data flow of your application.
Frozen ColumnsConfigure it around the data flow of your application.
Selection & CheckConfigure it around the data flow of your application.
Cell Merge & SummaryConfigure it around the data flow of your application.
PivotConfigure it around the data flow of your application.
CSS Variable ThemeConfigure it around the data flow of your application.
DOM Rendering BenefitsAccessibility, CSS customization, Browser native features
CHECK FIRST
Review before adoption
01
Excel Formula Engine
Does not provide an Excel-equivalent formula evaluation engine
02
Dedicated Designer/Ribbon
No UI designer or ribbon toolbar provided
03
License and distribution
BeautifulGrid is open source under Apache-2.0. Individuals and businesses may use it in commercial projects under the license terms ↗.
Ready to validate?
Validate adoption
with real data.
Instead of guessing, validate your target data, editor, and browser combination in the Playground and runnable examples.