Lattice Grid Buy a licence

demo D01

Hello grid: JavaScript Data Grid Demo

A working grid in ten lines, no build step and no dependencies

createGrid(el, { columns, rows })

This is the smallest possible start: a live grid built from one element, a list of columns and an array of records, with no build step and nothing to install first. It is the ten lines you would paste into an empty page to see real data on screen, so you can judge the grid before committing to it.

Building…
Loading a live grid…

The configuration

<link rel="stylesheet" href="https://cdn.latticegrid.dev/lattice-grid@1.103.2/lattice-grid.min.css">
<script src="https://cdn.latticegrid.dev/lattice-grid@1.103.2/lattice-grid.min.js"></script>

<div id="grid" style="height: 540px"></div>

<script>
  // One object per circuit: the grid takes plain data and needs nothing else.
  const rows = [
    { circuit: 'AB-1201', region: 'North', status: 'live', bandwidth: 400, charge: 1200 },
    { circuit: 'CD-2043', region: 'South', status: 'live', bandwidth: 1000, charge: 2600 },
    { circuit: 'EF-3310', region: 'Central', status: 'provisioning', bandwidth: 250, charge: 900 },
    { circuit: 'GH-4127', region: 'North', status: 'live', bandwidth: 600, charge: 1750 },
    { circuit: 'IJ-5588', region: 'West', status: 'suspended', bandwidth: 150, charge: 500 },
    { circuit: 'KL-6642', region: 'South', status: 'live', bandwidth: 2000, charge: 4200 },
  ];

  const grid = LatticeGrid.createGrid(document.getElementById('grid'), {
    columns: [
      { field: 'circuit', title: 'Circuit' },
      { field: 'region', title: 'Region' },
      { field: 'status', title: 'Status' },
      { field: 'bandwidth', title: 'Bandwidth', type: 'number' },
      { field: 'charge', title: 'Monthly charge', type: 'number' },
    ],
    rows,
  });
</script>
Open in sandbox

A minimal JavaScript data grid setup

createGrid(el, { columns, rows }) is the whole surface area for a first grid: an element, a column list, and an array of records. There is no build step, no bundler configuration and no dependency to install first, which matters most in the moment a developer is deciding whether a JavaScript data grid is worth adopting at all rather than reaching for a table of <div>s. Columns can be declared with just a field and the grid infers a reasonable type, width and comparator from the values it sees, so the ten-line version and the fully typed version are the same API, not two different modes. Rows are a plain array; there is no schema to register before data can render. Rendering itself uses the same virtual scrolling the larger demos exercise, so the initial paint cost stays proportional to the rows visible in the viewport, not the rows supplied, even before a dataset is large enough for that to matter. Keyboard focus lands on the grid as a single tab stop, with arrow keys moving the active cell, which means accessibility is not something added after the columns are configured but a property of createGrid itself. The result is a working, sortable, keyboard-navigable grid before any option beyond columns and rows has been touched.

How do I create a data grid in JavaScript with no framework?

Call createGrid(el, { columns, rows }) against a container element, a column array describing each field, and a row array of plain objects. No React, Vue or build tooling is required; the function attaches the grid directly to the element and renders from the data given. Column types, widths and sort behaviour can be left unset and Lattice Grid infers them from the row values.

Related demos