Joining a second grid

<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 style="display:flex;gap:16px">
  <div id="orders" style="flex:2;height:300px"></div>
  <div id="customers" style="flex:1;height:300px"></div>
</div>
<div id="byTier" style="margin-top:16px"></div>

<script>
  const USD = { style: 'currency', currency: 'USD', maximumFractionDigits: 0 };

  // The two sides: orders carry a customerId, and the tier lives on the customer.
  const customers = LatticeGrid.createGrid(document.getElementById('customers'), {
    rowKey: 'id',
    columns: [{ field: 'id', title: 'ID' }, { field: 'name', title: 'Customer' }, { field: 'tier', title: 'Tier' }],
    rows: customerRows,  // [{ id: 'C0', name: 'Acme', tier: 'Enterprise' }, …]
  });

  const orders = LatticeGrid.createGrid(document.getElementById('orders'), {
    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,  // [{ id: 'O0', customerId: 'C0', region: 'EMEA', amount: 1240 }, …]
  });

  // 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. It runs
  // before grouping, so a group can read a field the join produced.
  LatticeGrid.createGrid(document.getElementById('byTier'), {
    autoHeight: true,
    source: {
      mode: 'derived', from: orders, follow: 'filtered', refresh: 'live',
      join: { with: customers, 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>