svelte data grid · data router

Svelte Grid: Data Router

One feed, split across as many grids as you want by a key on each record, wrapped around them with Router.svelte. Neither grid below owns its own fetch or its own WebSocket; each just names the route it wants.

Also in: React Angular Vue

Install and import

npm install @toclocoinc/lattice-grid
# free on localhost; a production domain needs a licence key (see /pricing/)

The file

Orders.svelte

<!-- Orders.svelte -->
<script>
  import Router from '@toclocoinc/lattice-grid/svelte/Router.svelte';
  import Grid from '@toclocoinc/lattice-grid/svelte/Grid.svelte';
  import '@toclocoinc/lattice-grid/css';

  const MONEY = { style: 'currency', currency: 'USD', decimals: 0 };
  const orderColumns = [
    { field: 'id', title: 'Ref', layout: { width: 110, pin: 'start' } },
    { field: 'region', title: 'Region', filter: { type: 'set' } },
    { field: 'service', title: 'Service', filter: { type: 'set' } },
    { field: 'value', title: 'Value', type: 'number', format: MONEY, total: 'sum' },
  ];
  const returnColumns = orderColumns.map((c) => (c.field === 'value' ? { ...c, title: 'Refund' } : c));
</script>

<!-- The router is built by the first Grid below that names a route, and
     destroyed when this component is. -->
<Router config={{ key: 'type', rowKey: 'id' }}>
  <div class="orders">
    <Grid route="order" rowKey="id" selection="multiple"
          highlightOnChange={{ duration: 500 }} columns={orderColumns} rows={[]} />
    <Grid route="return" rowKey="id"
          highlightOnChange={{ duration: 500 }} columns={returnColumns} rows={[]} />
  </div>
</Router>

<style>
  .orders { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .orders :global(> *) { height: 320px; }
</style>

See it running

Building…

Loading a live grid…

Open the plain-JS data router demo →

Working in Svelte

Router.svelte puts the handle in context. It is built by the first <Grid route="…"> beneath it that attaches, and destroyed when the <Router> component itself is, so it lives exactly as long as the subtree that owns it.

The config prop is read once to build the router, because rebuilding it would drop every attached grid and every row it holds; pass a plain object rather than something you intend to mutate in place.

A grid still needs its own columns. The router moves rows by key; it does not decide what a grid displays, so each route's <Grid> configures its own columns exactly as a standalone grid would, as returnColumns does above by adapting orderColumns.

Read the docs Svelte data grid overview Free on localhost. See pricing.