What's revo-grid is all about?
Let's say you've got a ton of data to display on your web app. It's all about letting you throw in loads of data and manipulate it any way you fancy—without breaking a sweat. Read more about how and why you should use it in our Overview section.
WARNING
If you are migrating from version 3, please read our full migration guide.
Find guides for your framework
TIP
Revogrid's API is consistent across all major frameworks, ensuring that you can transfer your experience and knowledge from one framework to another
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.
– Can't find your framework? Ask us or open an issue on GitHub.
Key Concepts
- Grid
<revo-grid />: The grid (or data grid) is the main component that displays data in a tabular format. It consists of rows and columns, where each intersection represents a cell. - Columns: Columns define the structure of the data grid. Each column typically represents a specific data field and has properties such as header name, data type, and custom renderers.
- Rows: Rows represent the individual records of data within the grid. Each row is an object containing data fields that correspond to the columns.
- Cells: Cells are the individual units of the grid where a row and column intersect. Each cell displays a specific data value.
- Data Model: The data model is a schema that defines the structure of the data to be displayed in the grid, including the fields and their types.
- Viewports: Viewports are the main sections of the grid that display data. They are responsible for displaying the data in the grid based on the current scroll position.
Play online
Try revo-grid directly on CodeSandbox without setting up anything locally
Revogrid in 60 seconds
This method is perfect for prototypes, quick projects, or just getting a feel of what it can do. Directly include revo-grid in your HTML file to get started.
Embed the library using a script tag in the <head> section of your index.html. This loads the revo-grid webcomponent, making it available throughout your document.
<!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: 200px"/>
</body>
</html>Once you've integrated grid into your html, the next step is to breathe life into it. It's as simple as defining your grid's structure and feeding it the data it's meant to display:
// Snag your grid element from the DOM
const grid = document.querySelector('revo-grid');
// Column definitions
const columns = [
{
prop: 'first', // This is the key in your data array
name: 'First column' // This is the name that will appear in the header
},
{
prop: 'second',
name: 'Second column', // Another column for good measure
// Spice up your cell with a custom template
cellTemplate: (createElement, props) => {
return createElement('div', {
style: { backgroundColor: 'red' }, // Because red is fast
class: { 'inner-cell': true } // A touch of styling
}, props.model[props.prop] || ''); // Display the data, or nothing at all
}
}
];
// Here's your data, ready to be displayed
const rows = [{
first: 'New item', // Matches the 'first' prop in columns
second: 'Item description' // Ditto for 'second'
// Add more rows as needed
}];
// Let the grid know about your columns and data
grid.columns = columns;
grid.source = rows;