demo D226

Joining a second grid in Svelte

Orders carry a customer id but no tier; a join brings it across from a customers grid, then groups revenue by tier

join: { with, on, select }

Here orders carry a customer id but no tier, and a join brings the tier across from a separate customers grid, then groups revenue by it. It lets you enrich one dataset from another and report on the combined result, without flattening the two together beforehand.

Building…

Loading a live grid…

This is the Svelte version. A use action attaches the grid to a plain element, so no framework runtime is passed in and the component stays small, while the configuration is ordinary Svelte state.

The configuration

<script>
  import { createGrid } from 'https://cdn.latticegrid.dev/lattice-grid@1.107.0/lattice-grid.esm.min.js';
  import createLatticeAction from 'https://cdn.latticegrid.dev/lattice-grid@1.107.0/modules/svelte.esm.min.js';

  const lattice = createLatticeAction({ createGrid });

  const USD = { style: 'currency', currency: 'USD', decimals: 0 };

  // The two sides captured as they are created, so the derived grid can name them.
  let ordersGrid;
  let customersGrid;

  // Orders carry a customerId, and the tier lives on the customer.
  const ordersConfig = {
    rowKey: 'id', toolPanel: { side: 'left', panels: ['filters', 'columns'] },
    columns: [
      { field: 'customerId', title: 'Customer' },
      { field: 'region', title: 'Region', filter: { type: 'set' } },
      { field: 'amount', title: 'Value', type: 'number', format: USD, total: 'sum' },
    ],
    rows: orderRows,  // e.g. [{ id: 'O0', customerId: 'C0', region: 'EMEA', amount: 1240 }, ...]
    onGrid: (grid) => { ordersGrid = grid; },
  };

  const customersConfig = {
    rowKey: 'id',
    columns: [
      { field: 'id', title: 'ID' },
      { field: 'name', title: 'Customer' },
      { field: 'tier', title: 'Tier', filter: { type: 'set' } },
    ],
    rows: customerRows,  // e.g. [{ id: 'C0', name: 'Acme', tier: 'Enterprise' }, ...]
    onGrid: (grid) => { customersGrid = grid; },
  };

  // The join brings tier across from the customers grid onto each order, matching
  // customerId to id, then the group runs on that brought-across field, so a group
  // can read a field the join produced. Filter a region on the book and the tiers
  // re-derive from what is left. The getters defer the read of each source to when
  // this grid is created, by which point both grids beside it exist.
  const byTierConfig = {
    autoHeight: true,
    source: {
      mode: 'derived',
      get from() { return ordersGrid; },
      follow: 'filtered', refresh: 'live',
      join: { get with() { return customersGrid; }, on: { left: 'customerId', right: 'id' }, select: ['tier'] },
      groupBy: 'tier',
      select: { revenue: { of: 'amount', fn: 'sum' }, orders: { fn: 'count' } },
      sort: [{ col: 'revenue', dir: 'desc' }],
    },
    columns: [
      { field: 'tier', title: 'Tier' },
      { field: 'revenue', title: 'Revenue', type: 'number', format: USD },
      { field: 'orders', title: 'Orders', type: 'number' },
    ],
  };
</script>

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

<div style="display: flex; gap: 16px">
  <div use:lattice={ordersConfig} style="flex: 2; height: 300px"></div>
  <div use:lattice={customersConfig} style="flex: 1; height: 300px"></div>
</div>
<div use:lattice={byTierConfig} style="margin-top: 16px"></div>