Lattice Grid Buy a licence

demo D07

Type inference in htmx

Undeclared columns that still sort the way you would expect

default comparator

This grid is given columns with no declared type and still sorts each one the way you would expect, numbers as numbers and dates as dates. It samples the values and picks a sensible default, so you get correct behaviour from raw data without hand-declaring a type for every field.

Building…
Loading a live grid…

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.107.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, and data-id on each row is
     the key the grid carries it under. -->
<table id="type-inference-table" data-lattice-grid>
  <thead>
    <tr>
      <th data-field="service">Service</th>
      <th data-field="active">Active</th>
      <th data-field="instances">Instances</th>
      <th data-field="errorRate">Error rate</th>
      <th data-field="monthlyCost">Monthly cost</th>
      <th data-field="lastDeploy">Last deploy</th>
    </tr>
  </thead>
  <tbody>
    <tr data-id="1"><td>svc-00001</td><td>false</td><td>49</td><td>0.025</td><td>37920.55</td><td>2026-06-21</td></tr>
    <tr data-id="2"><td>svc-00002</td><td>true</td><td>162</td><td>0.0215</td><td>30070.04</td><td>2025-10-09</td></tr>
    <tr data-id="3"><td>svc-00003</td><td>true</td><td>20</td><td>0.0168</td><td>36278.48</td><td>2026-08-16</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.107.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('type-inference-table'), {
    // No `type` on any column. The default comparator is value-aware, so a text
    // column of numbers still orders 2.5 before 10 and dates sort chronologically.
    // Declaring a type is what buys the editor, the parser, the export format and
    // the filter kind, so it is worth doing once a column earns it.
    columns: [
      { field: 'service', title: 'Service' },
      { field: 'active', title: 'Active' },
      { field: 'instances', title: 'Instances' },
      { field: 'errorRate', title: 'Error rate' },
      { field: 'monthlyCost', title: 'Monthly cost' },
      { field: 'lastDeploy', title: 'Last deploy' },
    ],
  });
</script>

Sorting undeclared columns correctly by default

A JavaScript data grid usually asks for a type per column before it can sort or filter sensibly. Lattice Grid also works without that step. When a column has no declared type, it samples the values already in the row set and picks a default comparator: numbers compare numerically, ISO-shaped strings compare as dates, and everything else falls back to locale-aware text collation rather than byte order. The result is a grid that sorts a currency column, a date column and a plain string column the way a person would expect, even when the columns were never described in configuration.

Reach for this when the shape of the data is not known in advance, for instance a generic table renderer fed by an arbitrary JSON payload, or a prototype where declaring twenty columns up front would slow down the first pass. The default comparator only runs the inference once per column, caching the outcome, so scrolling and re-sorting a large result set does not repeat the sampling work. Declaring type explicitly always takes precedence and skips inference entirely, which is the better choice once a column’s shape is fixed and worth the extra line.

Does Lattice Grid need a schema before it can sort a column?

No. Lattice Grid samples row values for any column without a declared type and chooses a comparator from that sample, numeric, date-like or text. A schema is optional, not required. Declaring type on a column overrides the inferred comparator and is worth doing once the data shape is settled, since it removes the sampling step and documents the intent for anyone reading the configuration later.

Related demos