JavaScript Data Grid Quick Start
RevoGrid is a high-performance MIT-licensed JavaScript data grid built for large datasets, fast scrolling, and spreadsheet-like interactions. It works as a Web Component, so the same core grid can be used in JavaScript, TypeScript, React, Angular, Vue, Svelte, and other modern frontends.
This page is the fastest way to get a grid on the screen. From here you can move into feature guides, framework-specific setup, and the full API.
Why teams use RevoGrid
- Virtual rows and columns keep rendering fast as datasets grow.
- Built-in focus, range selection, editing, sorting, filtering, and pinning cover common grid workflows.
- The same
<revo-grid>core works across multiple frameworks. - Public methods and events make it possible to build custom workflows without forking the grid.
TIP
RevoGrid's API is consistent across all major frameworks. Transfer your experience and knowledge from one framework to another.
Can't find your framework?
Ask us or open an issue on GitHub.
Angular – Setup and usage in Angular environments.
React – Usage within React applications.
Svelte – Integrating into Svelte projects.
Vue 2 – Specific adaptations for Vue 2.
Vue 3 – Detailed guide for integrating with Vue 3.
Play online
If you want to try the grid before installing anything locally, start with the live example:
Source code Git Codesandbox
ts
import { stocks } from '@/json/stock.json'
import type { ColumnRegular } from '@revolist/revogrid'
// Define columns
const columns: ColumnRegular[] = [
{
name: '🎰 Ticker',
prop: 'symbol',
sortable: true,
pin: 'colPinStart',
cellTemplate: (h, { model, prop }) => h('strong', null, model[prop]),
},
{
name: '🔠 Company Name',
prop: 'company_name',
size: 300,
},
{
name: '',
prop: '📉 graph',
readonly: true,
// Custom cell render
cellTemplate(h) {
const barWidth = 5
const barSpacing = 5
const maxHeight = 30
const bars = []
// Draw 5 vertical bars with random heights
for (let i = 0; i < 5; i++) {
const barHeight = Math.random() * maxHeight
const x = i * (barWidth + barSpacing)
const y = maxHeight - barHeight + 5
// Create the rectangle element for the bar
const rect = h('rect', {
key: i,
x,
y,
width: barWidth,
height: barHeight,
fill: 'blue',
stroke: 'black',
})
// Append the rectangle to the group
bars.push(rect)
}
return h(
'svg',
{
width: '100%',
height: maxHeight + 10,
},
h('g', {}, bars)
)
},
},
{
name: '💰 Price',
prop: 'price',
},
{
name: '⬆️ Change',
prop: 'change',
},
{
name: '% Change',
prop: 'percent_change',
},
]
// Render grid
function render() {
// Create grid element
const grid = document.createElement('revo-grid')
document.getElementById('demo-overview')?.appendChild(grid)
const items = stocks
grid.columns = columns
grid.source = items
grid.theme = 'compact'
setInterval(() => {
grid.source = items.map((stock) => {
return {
...stock,
price: (Math.random() * 4000).toFixed(2),
change: (Math.random() * (20 - -5) + -5).toFixed(2),
}
})
}, 1000)
}json
{
"stocks": [
{
"symbol": "AAPL",
"company_name": "Apple Inc.",
"price": 150.23,
"change": 2.45,
"percent_change": 1.65
},
{
"symbol": "MSFT",
"company_name": "Microsoft Corporation",
"price": 300.45,
"change": -1.2,
"percent_change": -0.4
},
{
"symbol": "GOOGL",
"company_name": "Alphabet Inc. (Class A)",
"price": 2800.67,
"change": 10.89,
"percent_change": 0.39
},
{
"symbol": "AMZN",
"company_name": "Amazon.com Inc.",
"price": 3500.12,
"change": -5.76,
"percent_change": -0.16
},
{
"symbol": "FB",
"company_name": "Meta Platforms Inc.",
"price": 330.98,
"change": 3.2,
"percent_change": 0.97
},
{
"symbol": "TSLA",
"company_name": "Tesla Inc.",
"price": 750.89,
"change": -8.45,
"percent_change": -1.11
},
{
"symbol": "JPM",
"company_name": "JPMorgan Chase & Co.",
"price": 155.76,
"change": 1.56,
"percent_change": 1.01
},
{
"symbol": "V",
"company_name": "Visa Inc.",
"price": 220.34,
"change": -2.1,
"percent_change": -0.95
},
{
"symbol": "PG",
"company_name": "Procter & Gamble Co.",
"price": 145.67,
"change": 0.76,
"percent_change": 0.52
},
{
"symbol": "DIS",
"company_name": "The Walt Disney Company",
"price": 175.45,
"change": 4.32,
"percent_change": 2.53
},
{
"symbol": "GS",
"company_name": "The Goldman Sachs Group Inc.",
"price": 380.21,
"change": -3.45,
"percent_change": -0.9
},
{
"symbol": "CVX",
"company_name": "Chevron Corporation",
"price": 120.89,
"change": 1.1,
"percent_change": 0.92
},
{
"symbol": "IBM",
"company_name": "International Business Machines Corporation",
"price": 130.67,
"change": -0.89,
"percent_change": -0.68
},
{
"symbol": "CSCO",
"company_name": "Cisco Systems Inc.",
"price": 55.32,
"change": 0.45,
"percent_change": 0.82
},
{
"symbol": "BA",
"company_name": "The Boeing Company",
"price": 180.45,
"change": -1.76,
"percent_change": -0.97
},
{
"symbol": "AAP",
"company_name": "Advance Auto Parts Inc.",
"price": 240.67,
"change": 2.34,
"percent_change": 0.98
},
{
"symbol": "INTC",
"company_name": "Intel Corporation",
"price": 50.21,
"change": -0.56,
"percent_change": -1.1
},
{
"symbol": "INTU",
"company_name": "Intuit Inc.",
"price": 400.12,
"change": 6.78,
"percent_change": 1.72
},
{
"symbol": "CAT",
"company_name": "Caterpillar Inc.",
"price": 180.34,
"change": 3.21,
"percent_change": 1.81
},
{
"symbol": "WMT",
"company_name": "Walmart Inc.",
"price": 140.56,
"change": -0.76,
"percent_change": -0.54
},
{
"symbol": "MMM",
"company_name": "3M Company",
"price": 170.89,
"change": 1.23,
"percent_change": 0.72
}
]
}Quick start in 60 seconds
For prototypes, internal tools, or plain HTML pages, load RevoGrid directly from a CDN:
html
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/@revolist/revogrid@latest/dist/revo-grid/revo-grid.js"></script>
</head>
<body>
<revo-grid style="height: 220px"></revo-grid>
</body>
</html>Then define columns and pass a source array:
typescript
// Snag your grid element from the DOM
const grid = document.querySelector('revo-grid');
// Let the grid know about your columns and data
grid.columns = [{ prop: 'first', name: 'First column' }];
// Here's your data, ready to be displayed
grid.source = [{ first: 'New item', second: 'Item description' }];Basic setup with a custom cell template
RevoGrid can stay simple for read-only tables, or become interactive with custom renderers, editors, and events. This example adds a richer cell template while keeping the same grid setup:
typescript
// Snag your grid element from the DOM
const grid = document.querySelector('revo-grid');
// Let the grid know about your columns and data
grid.columns = [
{ prop: 'first', name: 'First column' },
{
prop: 'second',
name: 'Second column',
// Spice up your cell with a custom template
cellTemplate: (h, { value }) => h('div', {
style: { backgroundColor: 'red' }, // Because red is fast
}, value || '')
}
];
// Here's your data, ready to be displayed
grid.source = [{
first: 'New item',
second: 'Item description'
//... Add more rows as needed
}];Next steps
Choose the path that matches what you are building:
- Installation: package managers, CDN usage, and loader setup.
- Overview: how the grid is structured and when to use it.
- AI Agents and MCP: connect Codex, Cursor, Claude Code, or VS Code to version-aware RevoGrid docs, examples, migrations, and typed API context.
- Filtering: enable built-in filtering and custom filter logic.
- Editing: inline editing, events, and read-only behavior.
- Understanding Viewports: physical vs virtual indexes, pinned areas, and event coordinates.
- Programmatic Grid Control: methods such as
setDataAt,setCellEdit, andscrollToRow. - Advanced Configuration:
columnTypes,rowDefinitions,trimmedRows,additionalData, and plugin-oriented hooks.
Framework guides
If you are integrating RevoGrid into an application framework, start with the wrapper guide for your stack:
Example
