Derived source

A grid computed from another grid

The derived source takes its rows from a grid you already have, rather than from an array or a server. You point it at another grid with from and describe the shape you want out: the rows grouped and totalled, an array column unnested, the top few per category, a column profile, or a join to a second grid. The result is a real grid that sorts, filters, exports and themes like any other, and stays in step with its source.

const book = createGrid(book_el, { columns, rows });

// A second grid whose rows come from the first.
const byRep = createGrid(panel_el, {
  source: {
    mode: 'derived',
    from: book,            // the grid to read
    follow: 'filtered',    // read whatever the filters leave
    groupBy: 'rep',
    select: {
      revenue: { of: 'amount', fn: 'sum' },
      deals:   { fn: 'count' },
    },
    sort: [{ col: 'revenue', dir: 'desc' }],
  },
  columns: [
    { field: 'rep' },
    { field: 'revenue', type: 'number' },
    { field: 'deals',   type: 'number' },
  ],
});

Under the covers it is a memory source with a row producer in front of it, so everything a memory grid does works here unchanged. What it adds is that the rows are computed from another grid rather than handed in.

It follows the filter

By default a derived grid reads the filtered rows of its source, so filtering the source, from a header, the quick filter or a chart click, re-derives every dependent grid on the next frame. There is nothing to keep in sync: the panels cannot disagree with the table they came from, because they are computed from it. That is the benefit worth reaching for, a dashboard where one control moves every panel at once. Set follow to 'all' or 'selected' to read every row or only the selected ones instead.

The shapes it produces

A derived grid can group and reduce with select, join a second grid on a shared key, unnest an array column into one row per element, bucket a date column into a time series, keep the top N per group, or profile a column into one row of statistics per column. Because a derived grid can itself be the source of another, these chain to any depth, and a filter at the root of the chain moves every level below it. Cross-filtering is the one deliberate path back up: clicking a summary row filters the grid it came from.

When to reach for it

Use a derived source whenever you want a summary, a rollup or a second view of data a grid already holds, rather than fetching or computing it separately. It is a browser-side computation over rows that are already here, so it pairs naturally with a streaming or memory source feeding the grid underneath.

This page is the source-mode framing; the derived and chained grids guide covers grouping, joins, profiles, chaining, cross-filtering and stat tiles in full, with a live demo. For the other source options, start from connect your data.