Lattice Grid Buy a licence

demo D275

Load from a URL

Point a grid at a file and it fetches and reads it; a large NDJSON file streams in as it downloads

source: createUrlSource(url)

Building…
Loading a live grid…

The configuration

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

<div id="json" style="height: 520px"></div>
<div id="stream" style="height: 520px"></div>

<script>
  const columns = [
    { field: 'symbol', title: 'Symbol', layout: { width: 130, pin: 'start' } },
    { field: 'name', title: 'Instrument', layout: { flex: 1, min: 170 } },
    { field: 'desk', title: 'Desk', filter: { type: 'set' } },
    { field: 'region', title: 'Region', filter: { type: 'set' } },
    { field: 'price', title: 'Price', type: 'number', format: { decimals: 4 } },
    { field: 'volume', title: 'Volume', type: 'number', format: { notation: 'compact' } },
    { field: 'status', title: 'Status', filter: { type: 'set' } },
  ];

  // A JSON file: a top-level array, fetched and read whole.
  LatticeGrid.createGrid(document.getElementById('json'), {
    rowKey: 'id',
    columns,
    source: LatticeGrid.createUrlSource('/demo-data/instruments.json'),
  });

  // An NDJSON file: one JSON value per line, read as it downloads so rows
  // appear while the file is still arriving. The format is taken from the
  // extension, and a bad response arrives as a source:error, never a throw.
  LatticeGrid.createGrid(document.getElementById('stream'), {
    rowKey: 'id',
    columns,
    source: LatticeGrid.createUrlSource('/demo-data/instruments-stream.ndjson', { batchSize: 1000 }),
  });
</script>

Point a grid at a file and let it load itself

Often the data you want is already sitting behind a URL: an export a colleague dropped on a server, a feed another team publishes, a file your own backend writes on a schedule. Lattice Grid can take that URL directly. Hand createUrlSource(url) to a grid as its source and the grid fetches the file, reads it, and fills itself, with no glue code to write in between. A JSON file, whether a plain top-level array or an array nested inside a wrapper object, is read whole and shown at once. A larger NDJSON file, with one record per line, is read as it downloads: rows appear while the file is still arriving, so a big export starts being useful in the first moment rather than after the last byte. This demo runs both side by side against files served straight from this site. The format is worked out from the file itself, so a .json and a .ndjson each load the right way with nothing extra to configure, and a failed request or a malformed line arrives as an event you can show the user rather than an error that stops the page. It is the shortest path there is from a file somewhere to a grid your users can sort, filter and scroll.

How do you load JSON into a data grid from a URL?

Pass source: createUrlSource(url) to createGrid. The grid fetches the file and reads it for you: a JSON file is loaded whole, and an NDJSON file streams in progressively so rows show up as the download proceeds. The loader picks the format from the URL, and you can point it at a nested array or add request headers when you need to. Anything that goes wrong, an unreachable file or a bad body, surfaces as a source:error event instead of an uncaught throw, so your page can tell the user what happened and stay standing.

Related demos