demo D226

Joining a second grid in Web Component

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 web component version. A lattice-grid custom element renders the grid with no build step, its configuration set as a property, so it works on a page that has no bundler at all.

The configuration

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

<script type="module">
  import { defineLatticeGrid } from 'https://cdn.latticegrid.dev/lattice-grid@1.108.0/modules/webcomponent.esm.min.js';
  defineLatticeGrid();
</script>

<div style="display: flex; gap: 16px">
  <lattice-grid id="orders" row-key="id" style="flex: 2; height: 300px"></lattice-grid>
  <lattice-grid id="customers" row-key="id" style="flex: 1; height: 300px"></lattice-grid>
</div>
<lattice-grid id="byTier" style="display: block; margin-top: 16px"></lattice-grid>

<script type="module">
  const USD = { style: 'currency', currency: 'USD', decimals: 0 };

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

  const ordersEl = document.getElementById('orders');
  ordersEl.config = {
    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' },
    ],
  };
  ordersEl.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. ordersEl.grid
  // and customersEl.grid are the live grids inside each element.
  const byTierEl = document.getElementById('byTier');
  byTierEl.config = {
    autoHeight: true,
    source: {
      mode: 'derived', from: ordersEl.grid, follow: 'filtered', refresh: 'live',
      join: { with: customersEl.grid, 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>