Lattice Grid Buy a licence

demo D159

htmx integration

A plain server-rendered table, upgraded to a live grid in place

hydrateTable(table, { licence })

Building…
Loading a live grid…

The configuration

<!-- A real, server-rendered table: readable with JavaScript off. -->
<table data-lattice-grid>
  <thead>
    <tr>
      <th data-field="invoice">Invoice</th>
      <th data-field="supplier">Supplier</th>
      <th data-field="qty" data-type="number">Qty</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>INV-2026-1000</td><td>Northgate Fibre, Ltd</td><td>24</td></tr>
    <tr><td>INV-2026-1001</td><td>Selby Ducting</td><td>7</td></tr>
    <!-- the rest of the rows, rendered by your server -->
  </tbody>
</table>

<script type="module">
  import { autoInit } from 'https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.13.0/modules/htmx.esm.js';
  autoInit(document);  // upgrades every <table data-lattice-grid> in place
</script>

Upgrading a server-rendered table into a live grid

The htmx module reads a plain <table> and swaps it for a live grid: the header’s data-field attributes name the columns, the body cells become the rows, and hydrateTable does the replacement. The markup is the schema, so there is no columns array on the page and the table is still readable with JavaScript switched off. A numeric column is declared where a server template would declare it, with data-type="number" on the header cell, and the grid picks up the type from there.

The reason to reach for htmx specifically is that it swaps fragments of the DOM in response to server requests, and a grid built by hand inside a swapped container would be torn out and never rebuilt. This module attaches to those swaps so the grid survives them, and it can drive sort, filter and infinite scroll as ordinary htmx requests that the server answers, keeping pagination and the request lifecycle on the server where htmx puts them. The whole integration is one self-contained bundle carrying its own copy of the grid, so a page loads the module instead of the base build rather than both.

How do you turn an HTML table into a data grid with htmx?

Give the <table> a data-lattice-grid attribute, name each column with data-field on its header cell, and call autoInit(document) once, or hydrateTable(table) for a single table. Lattice Grid reads the header for the columns and the body for the rows, then replaces the table with a live grid in place. Because the table is real server-rendered HTML, the page still shows the data with scripting off, and the grid is progressive enhancement layered on top rather than the only way to see anything.

Related demos