developer guide
Cross-Filtering Between Grids and Charts
Selecting in one view narrows the others built from it, so a click on a chart bar or a group heading filters the detail beside it. The cross-filter can be set, toggled, cleared and read, so your own controls join in on the same terms.
Developer guide › Sources and pushdown › Cross-Filtering Between Grids and Charts
Cross-filtering
A derived panel can filter the grid it summarises. Click a region in the summary and the detail grid narrows to it.
Click to filter, click again to release
source: {
mode: 'derived',
from: detail,
groupBy: 'region',
select: { total: { of: 'capacity', fn: 'sum' } },
crossFilter: true, // or a source column name
}
summary.events.on('rowClick', (e) => summary.crossFilter.toggle(e.key));
crossFilter.set, toggle, clear, get and
column make up the API. true filters through whatever the grid
groups by; a string names a different source column when the two do not share a name.
A panel does not filter itself. The filter a summary pushes onto its source is excluded when that same summary re-derives. Without that, clicking one region collapses the panel to the single row you just clicked, and there is nothing left to click next. With it, the panel keeps its full set of regions with the chosen one marked, which is what makes a second click possible at all.
Several panels compose. Each pushes its own filter onto the shared source and each excludes only its own, so region and status narrow the detail together while both panels stay navigable.