demo D01
Hello grid in htmx
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.
This is the htmx version. A server-rendered table is upgraded in place, so the page is readable before any script runs and gains the full grid when the module loads, which suits a progressively enhanced app.
The configuration
<link rel="stylesheet" href="https://cdn.latticegrid.dev/lattice-grid@1.108.0/lattice-grid.min.css">
<!-- A real, server-rendered table: readable with JavaScript off. data-field on
each header names the column that cell becomes. -->
<table id="circuits" data-lattice-grid>
<thead>
<tr>
<th data-field="circuit">Circuit</th>
<th data-field="region">Region</th>
<th data-field="status">Status</th>
<th data-field="bandwidth">Bandwidth</th>
<th data-field="charge">Monthly charge</th>
</tr>
</thead>
<tbody>
<tr><td>Backhaul North</td><td>North</td><td>live</td><td>1000</td><td>1420</td></tr>
<tr><td>Metro South</td><td>South</td><td>provisioning</td><td>250</td><td>640</td></tr>
<!-- the rest of the rows, rendered by your server -->
</tbody>
</table>
<script type="module">
import { hydrateTable } from 'https://cdn.latticegrid.dev/lattice-grid@1.108.0/modules/htmx.esm.min.js';
// The markup carries the rows; a server-rendered table's column types are
// declared in the config hydrateTable takes. The grid replaces the table
// where it stood.
const grid = hydrateTable(document.getElementById('circuits'), {
columns: [
{ field: 'circuit', title: 'Circuit' },
{ field: 'region', title: 'Region' },
{ field: 'status', title: 'Status', filter: { type: 'set' } },
{ field: 'bandwidth', title: 'Bandwidth', type: 'number' },
{ field: 'charge', title: 'Monthly charge', type: 'number', total: 'sum' },
],
});
</script>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.