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.
Quick start in 60 seconds
This page is the fastest way to get a data grid on the screen. From here you can move into feature guides, framework-specific setup, and the full API.
For prototypes, internal tools, or plain HTML pages, load RevoGrid directly from a CDN:
html
<!DOCTYPE html>
<html>
<body>
<revo-grid style="height: 150px"></revo-grid>
<script type="module">
import { defineCustomElement as defineRevoGrid } from 'https://cdn.jsdelivr.net/npm/@revolist/revogrid@latest/standalone/revo-grid.js/+esm';
defineRevoGrid();
const grid = document.querySelector('revo-grid');
grid.columns = [
{ prop: 'name', name: 'Name' },
{ prop: 'role', name: 'Role' },
];
grid.source = [
{ name: 'Ada Lovelace', role: 'Mathematician' },
{ name: 'Grace Hopper', role: 'Computer scientist' },
];
</script>
</body>
</html>Why teams use RevoGrid
- Virtual rows and columns keep rendering fast as datasets grow.
- Built-in focus, range selection, editing, sorting, filtering, column pinning, and row 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.JavaScript Data Grid Demo
Use this standalone JavaScript demo to see RevoGrid render editable tabular data with virtual scrolling and fast browser performance.
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
}
]
}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
