developer guide
Sorting, filtering and find: JavaScript Data Grid Guide
Single and multi-column sort, the filter menu and condition tree, quick filter, header histograms, a Ctrl+F find bar that highlights every match without touching what is shown, and grouping with totals and pivot.
Developer guide › Sorting, filtering and find
Sorting
Setting and reading
Filtering
There are two filters and they are separate on purpose. The quick filter is one string matched across every readable column. The filter set is a structured condition tree.
Header histograms and facet filtering
The shape of a column, drawn in its heading, and clickable. Explore a dataset by clicking through headers instead of writing queries.
Full guide: Header histograms and facet filtering ›
Quick filter modes
One box, four ways to match: contains (the default), words,
fuzzy and regex.
Full guide: Quick filter modes ›
Find
The quick filter answers "show me only the rows that contain X". Find answers a different question - "where is X?" - and leaves every other row exactly where it was, so you keep your place and the neighbours that give a value its meaning. Press Ctrl+F (Cmd+F on a Mac) with focus in the grid: a bar opens above the header with focus in its input, every cell whose displayed text matches lights up in place, the bar reads "N of M", Enter and Shift+Enter step through the matches with wrap, and Escape closes it and clears the marks.
Grouping, totals and pivot
Group by one or more columns
- headerControls
- filterRow
- showTotalInHeader
- A total beside the pivoted columns
- totalFilteredOnly
- totalOnlyChangedColumns
Full guide: Grouping, totals and pivot ›
Totals that a type can refuse
Some values do not add up the way plain numbers do. A data type can say which aggregates are meaningful for it, and supply its own arithmetic where the built-in one would be wrong.
Full guide: Totals that a type can refuse ›
Sticky group headings
Scrolling inside a group keeps that group's headings pinned above the rows, so the rows on screen always say which group they belong to. Nested groups stack, up to a cap.
Full guide: Sticky group headings ›
Pinned rows
A pinned row sits outside the scrolling body, against the header or above the status bar, and stays there while the rows scroll past it. Use one for a column-units line, a target or budget to compare against, a precomputed summary, or a note that must not scroll away.