Styled Columns Technical Reference

Styled Columns to apply. Each one names a column and sets exactly one style property.

Any column. Draws the cell value as a pill. A numberArray or textArray column draws one pill per element; other array types are drawn as a single value.

Badges is the list of pill definitions. A Rule is an AdapTableQL boolean expression, evaluated per cell (and per element on a number or text array). Rules are tried in list order and the first match wins. A badge with no Rule is the fallback when no rule matches; if several have no rule, the first of those is used. Density, Spacing and OverflowMode (Truncate, Wrap or Scroll) apply to the whole column.

Numeric column. Draws a bullet chart in the cell: the value as a bar, a target as a marker, and optional qualitative bands behind the bar.

CellRanges colours those background bands (poor / ok / good). They are not a colour switch for the bar itself, which is what Percent Bar uses CellRanges for. TargetProperties supplies the target. Orientation is Horizontal (the default) or Vertical; a vertical chart needs a tall row.

colId of the column this style draws.

AdapTable uses the first Styled Column with this ColumnId.

Numeric column. Tints the cell background by where the value sits in a range.

The cell text stays. Set CellRanges for bands (a traffic-light scale), or ZeroCentred for a diverging colour either side of 0. ColumnComparison measures this cell against another column. RangeValueType is Number (the default) or Percentage (0–100).

Scalar column. Looks the cell value up in Mappings (and an optional Preset) and draws the matching icon.

Array columns are not supported; use BadgeStyle to draw one glyph per array element. Preset is Flags, Currencies, Trend or Status. MatchMode is Exact (the default) or CaseInsensitive. When nothing matches, FallbackProperties.Mode is Hide (the default), ShowText or Icon.

Name shown in the Settings Panel and used by styledColumnApi to find this definition.

Unique among Styled Columns.

Numeric column. Draws a bar whose length is the cell value on the column's scale.

CellRanges colours the bar by which band the value falls in. Origin is where the bar grows from: Auto (the default), Zero, Min, or a fixed number. ColumnComparison measures the cell against another column.

Numeric column. Draws a track from Min to Max and a marker at the cell value.

Min and Max are required. Each can be a number, another column's colId (that row's value), or Col-Min, Col-Max, Col-Avg or Col-Median across the visible rows. Reference is an optional second marker (a target or a previous close). CellRanges draws background bands on the track.

Numeric column. Draws a row of icons (stars by default) filled in proportion to the cell value.

Max is both the number of icons and the top of the scale, in the same units as the cell value. The default is 5, so a value of 4 fills four of five stars. The value is clamped to [0, Max]. AllowHalf (the default) fills the boundary icon by the fraction; otherwise the value rounds to a whole icon. Icon is Star, Heart, Circle or Thumb.

Which row kinds draw the style: data (leaf) rows, group rows, summary rows and grand-total rows.

Each Exclude* flag turns that kind off. When RowScope is omitted, Badge draws on every row kind and every other style draws on every kind except group rows.

Sparkline ignores this for non-data rows: it only draws on leaf rows, because the cell value has to be the array of points.

Numeric-array column. The cell value is the series, and AG Grid's sparkline renderer draws it.

options is an AG Charts sparkline options object (type: 'line', 'bar', 'area' or 'column'). Only leaf data rows are drawn.

Sets Entity to ReadOnly (overwriting a Strategy Entitlement of 'Full')

Suspends (i.e. turns off) an Adaptable Object

Exclude regular data rows

Exclude Group Rows

Exclude Summary Rows (used in Row Summaries)

Exclude Grand Total Rows (used in Aggregations)

When true, sets cell color from tinted background so text stays readable

Optional cell-text styling applied by Gradient renderer on top of gradient background tint

Alpha (0–1) at high end of the matched range’s scale

Alpha (0–1) at low end of the matched range’s scale

Optional AG Grid tooltip content: cell value and/or position along the range scale (%)

Zero-centred diverging gradient (Col-Min…0 and 0…Col-Max

Cell colour to use for values that fall inside Range

End of Range, can be literal number or DynamicRangeEndpoint

Start of Range, can be literal number or DynamicRangeEndpoint

Reverses the alpha ramp within this range only — values at the low
end render saturated, values at the high end render faint.

Useful as a Gradient Style option when the natural reading is
"lower-is-darker" (e.g. lower trade IDs are older / more important, so
deserve more visual emphasis than newer ones).

Only honoured by Gradient Style.

Colour to use for the Comparison

End value - either numeric value or Column ID

Start value - either numeric value or Column ID

Colour applied to negative cell values (Col-Min…0)

Colour applied to positive cell values (0…Col-Max)

Align to Left, Right or Center

Size of font: XSmall, Small, Medium, Large or XLarge

Style of font: Normal or Italic

Weight of font: Normal or Bold

Font colour in cell: hex, rgb(a) or name

Decoration of font: None, Underline, Overline or LineThrough

Background colour for 'Percent Bar'; leave unset if none required

Optional cell-text overlay configuration (display tokens, position, layout, alignment).

Optional cell-text styling applied to CellText overlay

Origin of the bar - i.e. the value the bar grows from Auto, Zero, Min or fixed number

Whether Tooltip shows Cell Value, Percent Value, both or none

Cell colour to use for values that fall inside Range

End of Range, can be literal number or DynamicRangeEndpoint

Start of Range, can be literal number or DynamicRangeEndpoint

Reverses the alpha ramp within this range only — values at the low
end render saturated, values at the high end render faint.

Useful as a Gradient Style option when the natural reading is
"lower-is-darker" (e.g. lower trade IDs are older / more important, so
deserve more visual emphasis than newer ones).

Only honoured by Gradient Style.

Colour to use for the Comparison

End value - either numeric value or Column ID

Start value - either numeric value or Column ID

Align to Left, Right or Center

Size of font: XSmall, Small, Medium, Large or XLarge

Style of font: Normal or Italic

Weight of font: Normal or Bold

Font colour in cell: hex, rgb(a) or name

Decoration of font: None, Underline, Overline or LineThrough

Per-value placement on the 3 × 3 grid around / on the bar/chart.

Placement of the formatted cell value.

Placement of the percent value (the cell value's position along the bar's
[min, max] scale as a 0–100% reading).

Horizontal alignment within its vertical band.

Vertical position relative to the bar/chart.

Collection of Badge Style Definitions

Optional cell-box styling applied to grid cell behind the badges

Density preset shared by every badge in the column - controls inner padding.

Optional column-level Font (only Alignment is meaningful for Badge cells)

How badges lay out in array-column cells where space is tight

Pixel gap between adjacent badges in array-column cells

Settings for Icon to display alongside badge text

Style for the Badge pill (cut-down version of Adaptable Style)

Optional AdapTableQL boolean expression for deciding whether Badge is displayed.
References to the Styled Column's own column resolve per cell value —
and, for array columns, per array element.

Visual shape of the Badge's corner radius

Pixel gap between the icon and the badge text. Falls back to the badge
Density preset when omitted; ignored when is true.

Icon to display in the badge.

Only show the icon and no badge text.

Position of the icon in the badge — 'Start' or 'End'.

Colour background of cell: hex, rgb(a) or name

Colour of cell border: hex, rgb(a) or name

Rounds corners of an element's outer border edge; equivalent of CSS border-radius

Align to Left, Right or Center

Size of font: XSmall, Small, Medium, Large or XLarge

Style of font: Normal or Italic

Weight of font: Normal or Bold

Font colour in cell: hex, rgb(a) or name

Decoration of font: None, Underline, Overline or LineThrough

Optional cell box styling applied to the cell behind the sparkline chart.

When set, this property "claims" the Cell slice for the column: any
Format Column matching this column has its Cell-box properties stripped.
When unset, Format Column Cell properties inherit through normally —
useful for letting a row's themed background show through behind the
sparkline.

AG Grid Sparkline Options

Colour background of cell: hex, rgb(a) or name

Colour of cell border: hex, rgb(a) or name

Rounds corners of an element's outer border edge; equivalent of CSS border-radius

Background colour for the chart area when no CellRanges are supplied.

Visual properties of the actual (foreground) bar — colour and thickness.

Optional cell-text overlay configuration.

Optional cell-text styling (colour, weight, font, alignment, …) applied
by the Bullet Chart renderer to the optional CellText overlay.

When set, this property "claims" the Font slice for the column: any
Format Column matching this column has its Font properties stripped.
When unset, Format Column Font properties inherit through normally.

Orientation of the chart.

- 'Horizontal' (default) - bands and bar run left-to-right; markers
are vertical lines / shapes positioned along the x-axis.
- 'Vertical' - bands and bar run bottom-to-top; markers are
horizontal lines / shapes positioned along the y-axis.

Note: vertical bullet charts need a tall row height to be readable
(we recommend at least 60px). AG Grid row height is a per-grid setting
(gridOptions.rowHeight or getRowHeight).

Origin of the actual bar.

- 'Auto' (default) - the bar grows from the left edge unless any cell
value or range endpoint is negative, in which case it grows from 0
- 'Zero' - the bar always grows from 0 (centred axis); positive
values extend right, negative values extend left
- any number - the bar grows from that fixed origin

Target value(s) rendered as marker(s) on the bar, plus the chart-level
default marker style. Per-target overrides are possible via the
object form.

Tooltip content - same tokens ('CellValue', 'PercentageValue') as
Percent Bar.

Ranges (e.g. to create traffic light effect)

Compares Cell values to another Column

Used with Ranges; can be Number (any number or Col-Min/Col-Max) or 'Percentage' (values 0-100)

Cell colour to use for values that fall inside Range

End of Range, can be literal number or DynamicRangeEndpoint

Start of Range, can be literal number or DynamicRangeEndpoint

Reverses the alpha ramp within this range only — values at the low
end render saturated, values at the high end render faint.

Useful as a Gradient Style option when the natural reading is
"lower-is-darker" (e.g. lower trade IDs are older / more important, so
deserve more visual emphasis than newer ones).

Only honoured by Gradient Style.

Colour to use for the Comparison

End value - either numeric value or Column ID

Start value - either numeric value or Column ID

Visual style of the target marker(s).

When Target is an array, this style applies to all markers; pass a
Target object with its own Marker property to override per-marker.

Target value(s) rendered as marker(s) on the bar.

Each Target can be:
- number - a fixed target value
- string - a column id; the row's value in that column is used as the target
- 'Col-Avg' | 'Col-Median' - computed across visible rows

Pass an array to render multiple targets (e.g. primary + stretch goal).

Marker colour. Defaults to the current text colour.

Marker shape.

Line thickness (for Shape: 'Line') or shape size in px.

Optional label displayed in the tooltip alongside the marker value.

Per-target marker override. Falls back to BulletChartTargetProperties.Marker.

Resolvable value: number, column id, Col-Avg or Col-Median.

Colour of the actual (foreground) bar drawn on top of any bands.

Height of the actual bar in px (the bands sit a few px taller behind it).

For vertical orientation this is interpreted as the bar's width
(i.e. its short axis); the long axis stretches to fit the cell.

Align to Left, Right or Center

Size of font: XSmall, Small, Medium, Large or XLarge

Style of font: Normal or Italic

Weight of font: Normal or Bold

Font colour in cell: hex, rgb(a) or name

Decoration of font: None, Underline, Overline or LineThrough

Per-value placement on the 3 × 3 grid around / on the bar/chart.

Placement of the formatted cell value.

Placement of the percent value (the cell value's position along the bar's
[min, max] scale as a 0–100% reading).

Horizontal alignment within its vertical band.

Vertical position relative to the bar/chart.

Controls partial icons for fractional values after clamping to
[0, Max] — not scaling between different ranges (e.g. 10-point vs
5-star).

When true, the decimal part fills part of the next icon (e.g. 3.5
with Max: 5 → three full icons + one half-filled + one empty).
When false, the clamped value is rounded with Math.round before
drawing, so only whole icons appear.

Optional cell box styling (background colour, border, border radius)
applied to the cell behind the rating icons.

When set, this property "claims" the Cell slice for the column: any
Format Column matching this column has its Cell-box properties stripped
(so a Format Column BackColor cannot tint the cell behind a Rating).
When unset, Format Column Cell properties inherit through normally —
useful for tinting a row of stars to match a Format Column theme.

Outline / fill colour for the inactive portion of the rating.

Drawn as a subtle background icon so the user can see the maximum
possible rating at a glance even when the cell value is low.

Fill colour for the active (filled) portion of the rating.

Colour background of cell: hex, rgb(a) or name

Colour of cell border: hex, rgb(a) or name

Rounds corners of an element's outer border edge; equivalent of CSS border-radius

Background colour for the chart area when no CellRanges are supplied.

Optional cell-text overlay configuration.

Visual style of the cell-value marker.

Upper bound of the track for each row.

See Min for the supported value forms.

Lower bound of the track for each row.

Can be:
- number — a fixed lower bound shared by every row
- string — a column id; the row's value in that column is used
- 'Col-Min' | 'Col-Max' | 'Col-Avg' | 'Col-Median' — a column-wide
aggregate computed across the visible rows

Orientation of the range bar.

Behaviour when the cell value falls outside [Min, Max], plus the
optional marker colour override used by Mode: 'Clamp'.

Defaults to { Mode: 'Clamp' } when omitted.

Optional reference value (e.g. previous close, target, midpoint) drawn
as a second marker on the track, together with its marker styling.
Leave unset to draw only the cell-value marker.

Tooltip content — same tokens ('CellValue', 'PercentageValue')
as Percent Bar / Bullet Chart.

Visual properties of the track (the line representing the [Min, Max]
interval).

Ranges (e.g. to create traffic light effect)

Compares Cell values to another Column

Used with Ranges; can be Number (any number or Col-Min/Col-Max) or 'Percentage' (values 0-100)

Cell colour to use for values that fall inside Range

End of Range, can be literal number or DynamicRangeEndpoint

Start of Range, can be literal number or DynamicRangeEndpoint

Reverses the alpha ramp within this range only — values at the low
end render saturated, values at the high end render faint.

Useful as a Gradient Style option when the natural reading is
"lower-is-darker" (e.g. lower trade IDs are older / more important, so
deserve more visual emphasis than newer ones).

Only honoured by Gradient Style.

Colour to use for the Comparison

End value - either numeric value or Column ID

Start value - either numeric value or Column ID

Marker colour. Defaults to the current text colour.

Marker shape.

Line thickness (for Shape: 'Line') or shape size in px.

Visual style of the reference marker.

Resolvable reference value (number / column id / 'Col-Min' | 'Col-Max'
| 'Col-Avg' | 'Col-Median'). Same forms asRangeBarStyle.Min/Max.

Marker colour override applied when the cell value is out of range
(only used with Mode: 'Clamp'). Useful to draw attention to
"off-scale" rows.

Behaviour when the cell value falls outside [Min, Max].

- 'Clamp' (default) — clamp the marker to the nearest end of the
track and (optionally) re-colour it via Color
- 'Overflow' — draw the marker outside the track at its true position
- 'Hide' — omit the cell-value marker entirely

Track colour.

Track thickness in px (the short axis — height in horizontal,
width in vertical).

Per-value placement on the 3 × 3 grid around / on the bar/chart.

Placement of the formatted cell value.

Placement of the percent value (the cell value's position along the bar's
[min, max] scale as a 0–100% reading).

Horizontal alignment within its vertical band.

Vertical position relative to the bar/chart.

Optional stying (background / border / radius) for Cell behind the Icon

Companion text to render alongside a matched icon (Cell Value and/or
the matched mapping's Description) and where it sits relative to the
icon (Before / After / Above / Below).

Mirrors the CellTextProperties grouping used by PercentBarStyle,
BulletChartStyle and RangeBarStyle for consistency.

Behaviour when no mapping matches the cell value, plus the icon used
by Mode: 'Icon'.

Defaults to { Mode: 'Hide' } when omitted.

Optional cell-text styling applied to the companion text

Pixel gap between the icon and the cell text (when shown).

Custom mappings for style (layered on top of a preset); leave undefined to use preset as-is

How Key is compared with the cell value (Exact or Case Insensitive)

Built-in mappings to use for the Icon Style

Pixel size of icon glyph (square)

Tooltip content: CellValue (raw cell value) or IconDescription (matched mapping's Description)

Optional human-readable description of this mapping (e.g. the full
country name when Key is an ISO code). Surfaced in the tooltip and
by the wizard's mappings list.

Icon to render when Key matches the cell value.

See — accepts an AdaptableIcon (system /
URL / element) or a plain string for emoji.

Cell value that triggers this mapping. Compared using the parent
(defaults to strict equality).

Booleans and numbers are accepted to support typed columns (e.g.
Key: true for an isLive flag, Key: 0 for a status code).

Colour background of cell: hex, rgb(a) or name

Colour of cell border: hex, rgb(a) or name

Rounds corners of an element's outer border edge; equivalent of CSS border-radius

Align to Left, Right or Center

Size of font: XSmall, Small, Medium, Large or XLarge

Style of font: Normal or Italic

Weight of font: Normal or Bold

Font colour in cell: hex, rgb(a) or name

Decoration of font: None, Underline, Overline or LineThrough

Adds a Styled Column to state.

Can this AdapTable instance display Sparklines (e.g. is AG Grid SparklinesModule installed)

Delete all Styled Columns in State

Deletes a Styled Column from state.

Edits a Styled Column

Returns a Styled Column for a given column

Retrieves all active (not-suspended) Styled Columns in Adaptable State

Retrieves Styled Column by Id

Retrieves Styled Column by Name

Retrieves Styled Column for given Column Id

Retrieves all Styled Columns in Adaptable State

Retrieves Styled Column section from Adaptable State

Retrieves all suspended Styled Columns in Adaptable State

Checks whether Column with given columnId has a Bullet Chart Style applied

Checks whether Column with given columnId has a Gradient Style applied

Checks whether Column with given columnId has a PercentBar Style applied

Checks whether Column with given columnId has a Rating Style applied

Whether this column is drawn as a sparkline.

Open Styled Column section of Settings Panel

Renders a standalone Sparkline
into a DOM element you provide, using the same AG Charts engine as Sparkline Styled Columns.

Provide at least container (where to render) and data (what to plot) on options; see
AgSparklineOptions for the
full set (type, width/height, min/max, etc.).

The caller owns the returned instance and is responsible for its lifecycle: call update() to
re-render it when the data or options change, and destroy() to dispose of it (e.g. when the
container is removed) to avoid memory leaks. AdapTable does not track or clean it up for you.

Suspends all Styled Columns

Suspends an active Styled Column so its style is no longer drawn.

Activates all suspended Styled Column

Activates a suspended Styled Column so its style is drawn again.