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

js.overview.example.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)
}

stock.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
    }
  ]
}