Lattice Grid Buy a licence

demo D43

Skeleton loading

What a remote source looks like while a block is in flight

render: 'skeleton'

Building…
Loading a live grid…

The configuration

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.13.0/lattice-grid.min.css">
<script src="https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.13.0/lattice-grid.min.js"></script>

<div id="grid" style="height: 540px"></div>

<script>
  const grid = LatticeGrid.createGrid(document.getElementById('grid'), {
    rowKey: 'id',
    selection: 'multiple',
    columns: [
      { field: 'service', title: 'Service', layout: { width: 180 } },
      { field: 'team', title: 'Team', layout: { width: 150 } },
      { field: 'owner', title: 'Owner', layout: { width: 180 } },
      { field: 'region', title: 'Region', layout: { width: 140 } },
      { field: 'status', title: 'Status', layout: { width: 130 }, cell: { render: 'pill' } },
      { field: 'utilisation', title: 'Utilisation', type: 'number', layout: { width: 140 }, format: { suffix: '%' } },
      { field: 'cost', title: 'Monthly cost', type: 'number', layout: { width: 160 }, format: { style: 'currency', currency: 'USD' } },
    ],
    // A paged source: the grid asks for a block at a time and paints skeleton
    // rows in the gap until each fetch resolves.
    source: {
      mode: 'paged',
      pageSize: 300,
      fetch: async ({ range, signal }) => {
        const res = await fetch(
          `/api/rows?start=${range.start}&end=${range.end}`,
          { signal },
        );
        return res.json();  // { rows, total }
      },
    },
  });
</script>

Skeleton screens for a grid waiting on a remote source

Skeleton loading is the renderer a column falls back to while the value behind it has not arrived yet: grey blocks standing in for text, a pill or a sparkline until the row’s real data resolves. A developer reaches for it wherever a JavaScript data grid is bound to a remote source with uneven latency (a paginated API, a search-as-you-type endpoint, a dashboard where some columns compute server-side after the first paint) and a blank or flashing cell would read as broken rather than pending. Lattice Grid sets this per column with render: 'skeleton', so a slow column can show its placeholder shape while sibling columns that already have data render normally in the same row, rather than blocking the whole grid on the last field to arrive. The placeholder draws inside the same recycled cell used for the eventual value, so swapping from skeleton to real content on data arrival is a cell repaint, not a row insert, and does not shift scroll position or trigger a relayout of neighbouring rows. For accessibility, the placeholder is exposed to assistive technology as a busy state rather than as empty or misleading text, so a screen reader does not announce a blank cell as a finished value.

How do you show a loading state in a JavaScript data grid?

Set the column’s cell.render option to 'skeleton' for any field whose value has not resolved yet. Lattice Grid draws a placeholder block in that cell until the row data updates, at which point the cell repaints with its normal renderer. This keeps pending and resolved columns visually distinct within the same row, rather than delaying the whole grid until every field is available.

Related demos