Columns / Column style

Column-level styling targets the entire column body at once. Each leaf column accepts getColumnStyle for inline styles and getColumnClass/columnClassRules for CSS classes. Unlike cell-level callbacks, they receive a ColumnStyleParams (column, values, api, state) with every visible value of the column and are evaluated once per column per dataset revision — the result is cached and applied to each rendered cell in O(1). Each example starts with 10 rows; use Add row/Remove row to append or drop rows at the end of the dataset and watch the aggregates — and the column presentation — re-evaluate. For per-cell styling use cellStyle/getCellStyle/cellClass instead; cell-level styles override column-level styles where they overlap.

Get column style

getColumnStyle computes an inline style object for the whole column from its aggregate values. The Speed column is tinted while the average speed stays above 2.5M km/h; the Fine column turns red only once the total of all visible fines passes 5.5M — at 10 rows the sum is ≈5.19M (untinted), so two Add row clicks flip the whole column, and removing rows flips it back. One evaluation per column per data change, reused by every rendered cell.
10 rows · total fine 0 (limit 5,500,000)
Loading…

Get column class

getColumnClass returns a CSS class for the entire column body based on its values, with the same total of fines > 5.5M trigger as the style example: the Fine column gets demo-column-steep only after Add row pushes the sum over the limit, and loses it when rows are removed. The Speed column keeps demo-column-fast while any visible speed exceeds 5M km/h.
10 rows · total fine 0 (limit 5,500,000)
Loading…

Column class rules

columnClassRules maps rule names to predicates over ColumnStyleParams. Every column whose predicate returns true gets the rule name applied as a CSS class across its body. Rules re-evaluate in a single batch on every dataset change — add or remove rows to cross the 5.5M fine total, or toggle the numeric highlight rule; both numeric columns update at once, still one evaluation per column rather than per cell.
10 rows · total fine 0 (limit 5,500,000)
Loading…