Lattice Grid Buy a licence

demo D275

Load a Data Grid From a URL: JSON and NDJSON in React

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

source: createUrlSource(url)

This grid points at a URL and fetches and reads the file behind it, streaming a large NDJSON file in as it downloads. It loads data that already lives behind a link, an export or a feed another team publishes, without a bespoke loader.

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.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.71.0/lattice-grid.min.css">

<div id="app"></div>

<script type="module">
  import React from 'https://esm.sh/react@18';
  import { createRoot } from 'https://esm.sh/react-dom@18/client';
  import { createGrid, createUrlSource } from 'https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.71.0/lattice-grid.esm.min.js';
  import createLatticeGrid from 'https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.71.0/modules/react.esm.min.js';

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

  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' } },
  ];

  function App() {
    return (
      <>
        {/* A JSON file: a top-level array, fetched and read whole. */}
        <LatticeGrid rowKey="id" columns={columns} source={createUrlSource('/demo-data/instruments.json')} style={{ height: '520px' }} />
        {/* An NDJSON file: one JSON value per line, read as it downloads so rows
            appear while the file is still arriving. A bad response arrives as a
            source:error, never a throw. */}
        <LatticeGrid rowKey="id" columns={columns} source={createUrlSource('/demo-data/instruments-stream.ndjson', { batchSize: 1000 })} style={{ height: '520px', marginTop: '14px' }} />
      </>
    );
  }

  createRoot(document.getElementById('app')).render(<App />);
</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 against files served straight from this site, one above the other, with a running count under each and the moment its first rows landed. 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