demo D207

Every type in htmx

A column per type, from every group, each sorting on its value not its text

type: 'voltage' · 'bytes' · 'ipv4' · …

This grid lays out one column of every type the grid ships, across every group, each sorting on its real value rather than its text. It is the quick reference for what a type buys you, so you can see the whole set behaving correctly in one place.

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-catalogue-table" data-lattice-grid>
  <thead>
    <tr>
      <th data-field="label">Sample</th>
      <th data-field="address">ipv4</th>
      <th data-field="subnet">cidr</th>
      <th data-field="elapsed">duration</th>
      <th data-field="disk">bytes</th>
      <th data-field="link">bitrate</th>
      <th data-field="status">hex</th>
      <th data-field="temp">celsius</th>
      <th data-field="voltage">voltage</th>
      <th data-field="resistance">resistance</th>
      <th data-field="frequency">frequency</th>
      <th data-field="pressure">pressure</th>
      <th data-field="spindle">rpm</th>
      <th data-field="span">metres</th>
      <th data-field="mass">kilograms</th>
      <th data-field="cpu">percentRate</th>
      <th data-field="spread">basisPoints</th>
    </tr>
  </thead>
  <tbody>
    <tr data-id="1"><td>sample 01</td><td>10.0.185.240</td><td>10.0.128.0/16</td><td>1230562</td><td>2954577632851</td><td>1000000000</td><td>25436</td><td>-19.8</td><td>3.034</td><td>487151</td><td>4200554864</td><td>482078</td><td>2671</td><td>2754.86</td><td>1038.805</td><td>0.85</td><td>13.4</td></tr>
    <tr data-id="2"><td>sample 02</td><td>10.0.182.164</td><td>10.0.192.0/20</td><td>8191289</td><td>3312282425954</td><td>10000000000</td><td>39241</td><td>21.6</td><td>8.337</td><td>145603</td><td>1158208190</td><td>943189</td><td>9666</td><td>4906.29</td><td>864.854</td><td>0.37</td><td>3.1</td></tr>
    <tr data-id="3"><td>sample 03</td><td>10.0.134.10</td><td>10.0.64.0/20</td><td>2659743</td><td>898867875009</td><td>40000000000</td><td>29509</td><td>80.6</td><td>1.288</td><td>654637</td><td>1807372882</td><td>638325</td><td>23701</td><td>2118.09</td><td>1775.742</td><td>0.53</td><td>33.5</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';

  // One column per built-in type, from every group. Each stores a number and
  // sorts on it rather than on the text it shows, and brings its own parser,
  // alignment and filter.
  // 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-catalogue-table'), {
    toolPanel: { side: 'left', panels: ['columns', 'filters'], exportName: 'types' },
    columns: [
      { field: 'label', title: 'Sample', layout: { pin: 'start', width: 130 } },
      { field: 'address', title: 'ipv4', type: 'ipv4', layout: { width: 140 } },
      { field: 'subnet', title: 'cidr', type: 'cidr', layout: { width: 150 } },
      { field: 'elapsed', title: 'duration', type: 'duration', layout: { width: 130 } },
      { field: 'disk', title: 'bytes', type: 'bytes', layout: { width: 120 } },
      { field: 'link', title: 'bitrate', type: 'bitrate', layout: { width: 120 } },
      { field: 'status', title: 'hex', type: 'hex', layout: { width: 110 } },
      { field: 'temp', title: 'celsius', type: 'celsius', layout: { width: 110 } },
      { field: 'voltage', title: 'voltage', type: 'voltage', layout: { width: 120 } },
      { field: 'resistance', title: 'resistance', type: 'resistance', layout: { width: 130 } },
      { field: 'frequency', title: 'frequency', type: 'frequency', layout: { width: 130 } },
      { field: 'pressure', title: 'pressure', type: 'pressure', layout: { width: 130 } },
      { field: 'spindle', title: 'rpm', type: 'rpm', layout: { width: 120 } },
      { field: 'span', title: 'metres', type: 'metres', layout: { width: 120 } },
      { field: 'mass', title: 'kilograms', type: 'kilograms', layout: { width: 130 } },
      { field: 'cpu', title: 'percentRate', type: 'percentRate', layout: { width: 130 } },
      { field: 'spread', title: 'basisPoints', type: 'basisPoints', layout: { width: 130 } },
    ],
  });
</script>