demo D207

Every type in React

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 React version. The grid mounts through the createLatticeGrid adapter, which takes its configuration as ordinary props and hands back the live grid through a ref. The grid below is the same one every other tab runs.

The configuration

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

<div id="grid"></div>

<script type="module">
  import React from 'https://esm.sh/react@18';
  import { createRoot } from 'https://esm.sh/react-dom@18/client';
  import { createGrid } from 'https://cdn.latticegrid.dev/lattice-grid@1.107.0/lattice-grid.esm.min.js';
  import createLatticeGrid from 'https://cdn.latticegrid.dev/lattice-grid@1.107.0/modules/react.esm.min.js';

  const LatticeGrid = createLatticeGrid({ React, createGrid });

  // One column per type, from every group. Each stores a number and sorts on
  // it, not on the text it shows, and brings its own parser, alignment, editor
  // and filter.
  const 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 } },
  ];

  const rows = [/* a sample row per record, one value per typed column */];

  function App() {
    return (
      <LatticeGrid
        rowKey="id"
        toolPanel={{ side: 'left', panels: ['columns', 'filters'], exportName: 'types' }}
        columns={columns}
        rows={rows}
        style={{ height: '540px' }}
      />
    );
  }

  createRoot(document.getElementById('grid')).render(<App />);
</script>