The viewer
Easy to integrate
A React wrapper for quick setup, or use the core library with any framework. Fully themeable to match your design system, with direct support from the GRID team when you need it.
Client-side processing
Everything runs in the browser. No backend required, no server round-trips. The viewer processes and renders spreadsheets entirely on the user's device.
Fully compatible
Handles formulas, merged cells, formatting, and large datasets with accuracy. Deeply compatible with Excel and Google Sheets, so existing spreadsheets render correctly out of the box.
import {
SpreadsheetViewer,
} from '@grid-is/mondrian-react';
const theme = {
'--mondrian-highlight-stroke': '#3b82f6',
'--mondrian-highlight-fill': '#dbeafe',
'--mondrian-border-radius': '12px',
};
function App() {
const model = /* your Model instance */;
return (
<div style={{ height: '600px' }}>
<SpreadsheetViewer
model={model}
theme={theme}
/>
</div>
);
}Integrating with React
Wrapped and ready for React
Getting started with the GRID Spreadsheet Viewer in React is straightforward. The mondrian-react package gives you a production-ready viewer component in just a few lines of code.
Customization is built into the core, where you can apply your own theme and branding to make the spreadsheet viewer fit seamlessly within your application.
Viewer or editor: which do you need?
The GRID Spreadsheet Viewer is designed for displaying spreadsheets inside your product. It renders spreadsheets accurately and beautifully, but does not support editing.
If your users need to interact with and modify spreadsheets directly inside your product, the GRID Spreadsheet Editor is the better fit.
Get started now
Install the engine from npm with a free evaluation license and start building today. When you are ready to ship, talk to us. Most teams are surprised how quickly they go from first contact to production, with direct support from the GRID team throughout.