# Quick start
Grid works as web component. All you have to do just to place component on the page and access it properties as an element.
Add revo-grid to your project in your index.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: 200px"/> </body> </html> After just simply call it properties:
const grid = document.querySelector('revo-grid'); const columns = [ { prop: 'name', name: 'First' }, { prop: 'details', name: 'Second', cellTemplate: (createElement, props) => { return createElement('div', { style: { backgroundColor: 'red' }, class: { 'inner-cell': true } }, props.model[props.prop] || ''); } } ]; const rows = [{ name: 'New item', details: 'Item description' }]; grid.columns = columns; grid.source = rows; Check Sandbox (opens new window) for real live sample.