developer guide
Data Grid Conditional Formatting
A rule reads a cell and decides how it looks, so an exception is visible before anyone reads a number: greater than, between, contains, colour scales, data bars and icon sets. Rules stack in order, and stopIfTrue settles which one wins.
Developer guide › Columns and cell rendering › Data Grid Conditional Formatting
Conditional formatting
A rule is a condition and the styling it produces. compileRules() turns a list
into the function cell.style already accepts.
import { compileRules } from '@toclocoinc/lattice-grid';
{ field: 'margin', cell: { style: compileRules([
{ when: { op: 'lt', value: 0 }, style: { background: '#fdecea', colour: '#b91c1c' } },
{ when: { op: 'gt', value: 20 }, style: { weight: 600 }, stopIfTrue: false },
{ scale: { min: 0, max: 100, colours: ['#f8f9fa', '#1a6bc7'] } },
]) } }The operators are the filter's operators. gt,
between and contains mean here exactly what they mean in the grid's
filters. Anyone
who has built a filter has already learned this, and two vocabularies for one idea is how a
product ends up explaining itself twice.
First match wins, by default. "Red if overdue, amber if due this week"
reads top to bottom and stops, the spreadsheet convention, and the one people expect.
stopIfTrue: false lets rules combine: weight from one, colour from another.
A blank cell satisfies no comparison. Number(null) is zero, so
a naive implementation sweeps every empty cell into "less than 100" and formats half a column
that has no data in it.
Text still compares numerically. A rules panel produces strings, the box
the user typed into yields "100", not 100, and comparing those as
text puts "9" above "100".
A scale's bounds are given, not derived. Deriving them means scanning the column per cell, and a scale that rescaled as rows were filtered would change a cell's colour without its value changing, the opposite of what the colour is for.
Highlighting
One mechanism for two jobs: the flash a changed cell makes, and a marker you paint deliberately.
On change, and on demand
highlightOnChange: { colour: '#ffe08a', duration: 1200 },
grid.highlight({ key: 'r1', colId: 'cap' }, { colour: 'green', duration: 800 });
grid.highlight({ key: 'r3' }, { colour: '#fdeaea', duration: 0 }); // until cleared
grid.highlight({ colId: 'margin' },{ colour: '#e7f1fd', duration: 0 });
grid.highlight.clear({ key: 'r3' });
grid.highlight.clear();Cell beats row beats column, so a specific highlight is never hidden by a broad one laid over it. A highlight belongs to the row rather than the element, so it survives scrolling, sorting and paging.