Styled Columns Technical Reference
Summary
- Styled Columns are configured at design-time in Initial Adaptable State
- Each style section below lists all properties for that style, including inherited base types and nested objects (shared types such as
CellColorRangeare repeated in every section that uses them) - The
Styled Column APIsection at the end covers run-time access
Styled Column State
The Styled Column section of Adaptable State contains a collection of StyledColumn objects:
| Property | Type | Description |
|---|---|---|
| StyledColumns | StyledColumn[] | Collection of Styled Columns |
StyledColumn
Each styled column is defined as follows:
| Property | Type | Description |
|---|---|---|
| BadgeStyle | BadgeStyle | Displays cell values in Column as a Badge |
| BulletChartStyle | BulletChartStyle | Styles a numeric column with single-row Bullet Chart, showing value as bar, target as marker and optional bands behind bar |
| ColumnId | string | Id of Column being styled |
| GradientStyle | GradientStyle | Styles a numeric column with a Gradient |
| IconStyle | IconStyle | Styles a column where each cell displays an icon looked up from a list of key → icon mappings |
| Name | string | Unique Name of Styled Column - used to identify it in Adaptable UI and APIs |
| PercentBarStyle | PercentBarStyle | Styles a numeric column so each cell displays a 'Bar' |
| RangeBarStyle | RangeBarStyle | Styles a numeric column as Range Bar - track showing where cell value sits between Min and Max |
| RatingStyle | RatingStyle | Styles a numeric column as a Rating - row of icons filled according to cell value |
| RowScope | RowScope | Which rows will render the Styled Column (data / group / summary total) |
| SparklineStyle | SparklineStyle | Displays a Sparkline Chart in an array column |
| IsReadOnly | boolean | Sets Entity to ReadOnly (overwriting a Strategy Entitlement of 'Full') |
| IsSuspended | boolean | Suspends (i.e. turns off) an Adaptable Object |
RowScope
The optional RowScope property on StyledColumn controls which row types render the style:
| Property | Type | Description |
|---|---|---|
| ExcludeDataRows | boolean | Exclude regular data rows |
| ExcludeGroupRows | boolean | Exclude Group Rows |
| ExcludeSummaryRows | boolean | Exclude Summary Rows (used in Row Summaries) |
| ExcludeTotalRows | boolean | Exclude Grand Total Rows (used in Aggregations) |
Gradient Style
The Gradient Style uses a GradientStyle object:
| Property | Type | Description | Default |
|---|---|---|---|
| AutoContrastText | boolean | When true, sets cell color from tinted background so text stays readable | |
| Font | CellFontStyle | Optional cell-text styling applied by Gradient renderer on top of gradient background tint | |
| MaxAlpha | number | Alpha (0–1) at high end of the matched range’s scale | 1 (fully opaque at range max) |
| MinAlpha | number | Alpha (0–1) at low end of the matched range’s scale | 0.15 (faint at range min) |
| ToolTipText | CellTextOptions | Optional AG Grid tooltip content: cell value and/or position along the range scale (%) | |
| ZeroCentred | ZeroCentredColors | Zero-centred diverging gradient (Col-Min…0 and 0…Col-Max |
Numeric Styled Column
The GradientStyle extends the base NumericStyledColumn object:
| Property | Type | Description | Default |
|---|---|---|---|
| CellRanges | CellColorRange[] | Ranges (e.g. to create traffic light effect) | |
| ColumnComparison | ColumnComparison | Compares Cell values to another Column | |
| RangeValueType | RangeValueType | Used with Ranges; can be Number (any number or Col-Min/Col-Max) or 'Percentage' (values 0-100) | Number |
Cell Color Ranges
The CellRanges property is an object of type cellcolorrange which defines a colour band between Min and Max endpoints:
| Property | Type | Description |
|---|---|---|
| Color | string | Cell colour to use for values that fall inside Range |
| Max | number |DynamicRangeEndpoint | End of Range, can be literal number or DynamicRangeEndpoint |
| Min | number |DynamicRangeEndpoint | Start of Range, can be literal number or DynamicRangeEndpoint |
| ReverseGradient | boolean | Reverses the alpha ramp within this range only — values at the low end render saturated, values at the high end render faint. |
Dynamic Endpoint
Min and Max properties accept either a literal number or a DynamicRangeEndpoint defined as follows:
| Value |
|---|
'Col-Min' |
'Col-Max' |
'Col-Avg' |
'Col-Median' |
Column Comparison
The ColumnComparison property is of type columncomparison which compares the cell value against another column's min/max span:
| Property | Type | Description |
|---|---|---|
| Color | string | Colour to use for the Comparison |
| MaxValue | number | string | End value - either numeric value or Column ID |
| MinValue | number | string | Start value - either numeric value or Column ID |
Range Value Type
The RangeValueType property is of type RangeValueType:
| Value |
|---|
'Number' |
'Percentage' |
Zero Centred Gradient
The ZeroCentred property is of type ZeroCentredColors which allows you to create a diverging gradient centred on zero:
| Property | Type | Description |
|---|---|---|
| NegativeColor | string | Colour applied to negative cell values (Col-Min…0) |
| PositiveColor | string | Colour applied to positive cell values (0…Col-Max) |
Cell Styling
There are 2 properties used to for cell styling.
Font(of typecellfontstyleapplies the cell text styling on top of the gradient tint:
| Property | Type | Description |
|---|---|---|
| Alignment | Alignment | Align to Left, Right or Center |
| FontSize | 'XSmall' | 'Small' | 'Medium' | 'Large' | 'XLarge' | Size of font: XSmall, Small, Medium, Large or XLarge |
| FontStyle | 'Normal' | 'Italic' | Style of font: Normal or Italic |
| FontWeight | 'Normal' | 'Bold' | Weight of font: Normal or Bold |
| ForeColor | string | Font colour in cell: hex, rgb(a) or name |
| TextDecoration | 'None' | 'Underline' | 'Overline' | 'LineThrough' | Decoration of font: None, Underline, Overline or LineThrough |
ToolTipText(of typeCellTextOptions) is an array ofCellTextOptiontokens:
| Value |
|---|
'CellValue' |
'PercentageValue' |
Percent Bar Style
The Percent Bar Style uses a PercentBarStyle object:
| Property | Type | Description | Default |
|---|---|---|---|
| BackColor | string | Background colour for 'Percent Bar'; leave unset if none required | undefined |
| CellTextProperties | BarStyleCellTextProperties | Optional cell-text overlay configuration (display tokens, position, layout, alignment). | |
| Font | CellFontStyle | Optional cell-text styling applied to CellText overlay | |
| Origin | 'Auto' | 'Zero' | 'Min' | number | Origin of the bar - i.e. the value the bar grows from Auto, Zero, Min or fixed number | 'Auto' |
| ToolTipText | CellTextOptions | Whether Tooltip shows Cell Value, Percent Value, both or none |
Numeric Styled Column
The PercentBarStyle extends the base NumericStyledColumn object:
| Property | Type | Description | Default |
|---|---|---|---|
| CellRanges | CellColorRange[] | Ranges (e.g. to create traffic light effect) | |
| ColumnComparison | ColumnComparison | Compares Cell values to another Column | |
| RangeValueType | RangeValueType | Used with Ranges; can be Number (any number or Col-Min/Col-Max) or 'Percentage' (values 0-100) | Number |
Cell Color Ranges
The CellRanges property is an object of type cellcolorrange and colours the bar according to where the cell value falls in each range.
| Property | Type | Description |
|---|---|---|
| Color | string | Cell colour to use for values that fall inside Range |
| Max | number |DynamicRangeEndpoint | End of Range, can be literal number or DynamicRangeEndpoint |
| Min | number |DynamicRangeEndpoint | Start of Range, can be literal number or DynamicRangeEndpoint |
| ReverseGradient | boolean | Reverses the alpha ramp within this range only — values at the low end render saturated, values at the high end render faint. |
Dynamic Endpoint
Min and Max properties accept either a literal number or a DynamicRangeEndpoint defined as follows:
| Value |
|---|
'Col-Min' |
'Col-Max' |
'Col-Avg' |
'Col-Median' |
Column Comparison
The ColumnComparison property is of type columncomparison which compares the cell value against another column's min/max span:
| Property | Type | Description |
|---|---|---|
| Color | string | Colour to use for the Comparison |
| MaxValue | number | string | End value - either numeric value or Column ID |
| MinValue | number | string | Start value - either numeric value or Column ID |
Range Value Type
The RangeValueType property is of type RangeValueType:
| Value |
|---|
'Number' |
'Percentage' |
Cell Styling
There are 3 properties used to for cell styling.
Font(of typecellfontstyle— styling for the optionalCellTextoverlay:
| Property | Type | Description |
|---|---|---|
| Alignment | Alignment | Align to Left, Right or Center |
| FontSize | 'XSmall' | 'Small' | 'Medium' | 'Large' | 'XLarge' | Size of font: XSmall, Small, Medium, Large or XLarge |
| FontStyle | 'Normal' | 'Italic' | Style of font: Normal or Italic |
| FontWeight | 'Normal' | 'Bold' | Weight of font: Normal or Bold |
| ForeColor | string | Font colour in cell: hex, rgb(a) or name |
| TextDecoration | 'None' | 'Underline' | 'Overline' | 'LineThrough' | Decoration of font: None, Underline, Overline or LineThrough |
-
CellText -
ToolTipText
Both are of type CellTextOptions — an array of CellTextOption tokens:
| Value |
|---|
'CellValue' |
'PercentageValue' |
Badge Style
The Badge Style contains a badgestyle object:
| Property | Type | Description | Default |
|---|---|---|---|
| Badges | BadgeStyleDefinition[] | Collection of Badge Style Definitions | |
| Cell | CellBoxStyle | Optional cell-box styling applied to grid cell behind the badges | |
| Density | BadgeDensity | Density preset shared by every badge in the column - controls inner padding. | 'Normal' |
| Font | CellFontStyle | Optional column-level Font (only Alignment is meaningful for Badge cells) | |
| OverflowMode | BadgeOverflowMode | How badges lay out in array-column cells where space is tight | 'Truncate' |
| Spacing | number | Pixel gap between adjacent badges in array-column cells | 4 |
Badge Style Definition
Each entry in Badges is a BadgeStyleDefinition:
| Property | Type | Description | Default |
|---|---|---|---|
| Expression | AdaptableBooleanQuery | ||
| IconProperties | BadgeIconProperties | Settings for Icon to display alongside badge text | |
| PillStyle | BadgePillStyle | Style for the Badge pill (cut-down version of Adaptable Style) | |
| Predicate | BadgeStylePredicate | Optional Rule for deciding whether Badge is displayed | |
| Shape | BadgeShape | Visual shape of the Badge's corner radius | 'Rounded' |
Badge Pill Style
Each Badge contains a PillStyle property; this is a subset of AdaptableStyle:
| Property | Type | Description |
|---|---|---|
| BackColor | string | Colour background of cell: hex, rgb(a) or name |
| ForeColor | string | Font colour in cell: hex, rgb(a) or name |
| BorderColor | string | Colour of cell border: hex, rgb(a) or name |
| FontWeight | 'Normal' | 'Bold' | Weight of font: Normal or Bold |
| FontStyle | 'Normal' | 'Italic' | Style of font: Normal or Italic |
| TextDecoration | 'None' | 'Underline' | 'Overline' | 'LineThrough' | Decoration of font: None, Underline, Overline or LineThrough |
Pill Shape
The Shape property (of type BadgeShape) defines the Shape (essentially radius) of the Pill:
| Value |
|---|
'Pill' |
'Rounded' |
'Square' |
Cell Box Style
The Cell property is of type cellboxstyle and provides optional box styling behind the badge row
| Property | Type | Description |
|---|---|---|
| BackColor | string | Colour background of cell: hex, rgb(a) or name |
| BorderColor | string | Colour of cell border: hex, rgb(a) or name |
| BorderRadius | number | Rounds corners of an element's outer border edge; equivalent of CSS border-radius |
Cell Font Style
The Font property (of type cellfontstyle) provides font styling (although only Alignment is meaningful):
| Property | Type | Description |
|---|---|---|
| Alignment | Alignment | Align to Left, Right or Center |
| FontSize | 'XSmall' | 'Small' | 'Medium' | 'Large' | 'XLarge' | Size of font: XSmall, Small, Medium, Large or XLarge |
| FontStyle | 'Normal' | 'Italic' | Style of font: Normal or Italic |
| FontWeight | 'Normal' | 'Bold' | Weight of font: Normal or Bold |
| ForeColor | string | Font colour in cell: hex, rgb(a) or name |
| TextDecoration | 'None' | 'Underline' | 'Overline' | 'LineThrough' | Decoration of font: None, Underline, Overline or LineThrough |
Sparkline Style
The Sparkline Style contains a sparklinestyle object:
| Property | Type | Description |
|---|---|---|
| Cell | CellBoxStyle | Optional cell box styling applied to the cell behind the sparkline chart. |
| options | AgSparklineOptions | AG Grid Sparkline Options |
Note
- The
optionsproperty accepts AG Grid Sparkline options - See the AG Grid documentation for the full property list
Cell Box Style
The Cell is of type cellboxstyle and provides optional box styling behind the sparkline chart:
| Property | Type | Description |
|---|---|---|
| BackColor | string | Colour background of cell: hex, rgb(a) or name |
| BorderColor | string | Colour of cell border: hex, rgb(a) or name |
| BorderRadius | number | Rounds corners of an element's outer border edge; equivalent of CSS border-radius |
Bullet Chart Style
The Bullet Chart Style uses a BulletChartStyle object:
| Property | Type | Description | Default |
|---|---|---|---|
| BackColor | string | Background colour for the chart area when no CellRanges are supplied. | |
| Bar | BulletChartBarProperties | Visual properties of the actual (foreground) bar — colour and thickness. | |
| CellTextProperties | BarStyleCellTextProperties | Optional cell-text overlay configuration. | |
| Font | CellFontStyle | Optional cell-text styling (colour, weight, font, alignment, …) applied by the Bullet Chart renderer to the optional CellText overlay. | |
| Orientation | 'Horizontal' | 'Vertical' | Orientation of the chart. | 'Horizontal' |
| Origin | 'Auto' | 'Zero' | number | Origin of the actual bar. | 'Auto' |
| TargetProperties | BulletChartTargetProperties | 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. | |
| ToolTipText | CellTextOptions | Tooltip content - same tokens ('CellValue', 'PercentageValue') as Percent Bar. |
Numeric Styled Column
The BulletChartStyle extends the base NumericStyledColumn object:
| Property | Type | Description | Default |
|---|---|---|---|
| CellRanges | CellColorRange[] | Ranges (e.g. to create traffic light effect) | |
| ColumnComparison | ColumnComparison | Compares Cell values to another Column | |
| RangeValueType | RangeValueType | Used with Ranges; can be Number (any number or Col-Min/Col-Max) or 'Percentage' (values 0-100) | Number |
Cell Color Ranges
The CellRanges property is an object of type cellcolorrange and renders qualitative background bands behind the bar:
| Property | Type | Description |
|---|---|---|
| Color | string | Cell colour to use for values that fall inside Range |
| Max | number |DynamicRangeEndpoint | End of Range, can be literal number or DynamicRangeEndpoint |
| Min | number |DynamicRangeEndpoint | Start of Range, can be literal number or DynamicRangeEndpoint |
| ReverseGradient | boolean | Reverses the alpha ramp within this range only — values at the low end render saturated, values at the high end render faint. |
Dynamic Endpoint
Min and Max properties accept either a literal number or a DynamicRangeEndpoint defined as follows:
| Value |
|---|
'Col-Min' |
'Col-Max' |
'Col-Avg' |
'Col-Median' |
Column Comparison
The ColumnComparison property is of type columncomparison which compares the cell value against another column's min/max span:
| Property | Type | Description |
|---|---|---|
| Color | string | Colour to use for the Comparison |
| MaxValue | number | string | End value - either numeric value or Column ID |
| MinValue | number | string | Start value - either numeric value or Column ID |
Range Value Type
The RangeValueType property is of type RangeValueType:
| Value |
|---|
'Number' |
'Percentage' |
Bullet Chart Target
The TargetProperties property is a is a BulletChartTargetProperties object made up of 2 properties:
| Property | Type | Description |
|---|---|---|
| Marker | BarStyleMarker | Visual style of the target marker(s). |
| Target | BulletChartTarget|BulletChartTarget[] | Target value(s) rendered as marker(s) on the bar. |
Marker
The Marker property is a is a BarStyleMarker object:
| Property | Type | Description | Default |
|---|---|---|---|
| Color | string | Marker colour. Defaults to the current text colour. | 'var(--ab-color-text)' |
| Shape | 'Line' | 'Triangle' | 'Dot' | 'Diamond' | Marker shape. | |
| Size | number | Line thickness (for Shape: 'Line') or shape size in px. |
Target
The Target property is a is a BulletChartTarget object:
| Value |
|---|
number |
string |
'Col-Avg' |
'Col-Median' |
BulletChartTargetDefinition |
Cell Styling
There are 3 properties used to for cell styling.
Font(of typecellfontstyle— styling for the optionalCellTextoverlay:
| Property | Type | Description |
|---|---|---|
| Alignment | Alignment | Align to Left, Right or Center |
| FontSize | 'XSmall' | 'Small' | 'Medium' | 'Large' | 'XLarge' | Size of font: XSmall, Small, Medium, Large or XLarge |
| FontStyle | 'Normal' | 'Italic' | Style of font: Normal or Italic |
| FontWeight | 'Normal' | 'Bold' | Weight of font: Normal or Bold |
| ForeColor | string | Font colour in cell: hex, rgb(a) or name |
| TextDecoration | 'None' | 'Underline' | 'Overline' | 'LineThrough' | Decoration of font: None, Underline, Overline or LineThrough |
-
CellText -
ToolTipText
Both are of type CellTextOptions — an array of CellTextOption tokens:
| Value |
|---|
'CellValue' |
'PercentageValue' |
Rating Style
User guide: Rating Style
RatingStyle
| Property | Type | Description | Default |
|---|---|---|---|
| AllowHalf | boolean | Controls partial icons for fractional values after clamping to [0, Max] — not scaling between different ranges (e.g. 10-point vs 5-star). | true |
| Cell | CellBoxStyle | Optional cell box styling (background colour, border, border radius) applied to the cell behind the rating icons. | |
| EmptyColor | string | Outline / fill colour for the inactive portion of the rating. | a low-opacity tint of the current text colour. |
| FilledColor | string | Fill colour for the active (filled) portion of the rating. | 'var(--ab-color-warn, #f5a623)' — a warm amber that reads well on both light and dark themes. |
| Gap | number | Pixel gap between adjacent icons. | 2 |
| Icon | RatingIconShape | Icon used for each rating mark. | 'Star' |
| Max | number | Number of icons per cell and the upper bound of the rating scale, in the same numeric units as the cell value. | 5 |
| ShowValue | boolean | When true, the numeric cell value is also displayed alongside the icons (e.g. ★★★★☆ 4.2). Useful when precise scores matter beyond the visual approximation. | false |
| Size | number | Icon size in pixels (each icon is square). The renderer keeps the row of icons vertically centred regardless of cell height. | 14 |
| ToolTipText | CellTextOptions | Optional AG Grid tooltip content — CellValue and/or PercentageValue. PercentageValue is the clamped cell value as a percent of Max (clamp(value, 0, Max) / Max, same scale as the icon fill). |
RatingIconShape
Used by Icon (RatingIconShape):
| Value |
|---|
'Star' |
'Heart' |
'Circle' |
'Thumb' |
CellBoxStyle
Used by Cell — optional box styling behind the rating icons.
| Property | Type | Description |
|---|---|---|
| BackColor | string | Colour background of cell: hex, rgb(a) or name |
| BorderColor | string | Colour of cell border: hex, rgb(a) or name |
| BorderRadius | number | Rounds corners of an element's outer border edge; equivalent of CSS border-radius |
CellTextOption
Used by ToolTipText:
| Value |
|---|
'CellValue' |
'PercentageValue' |
Range Bar Style
User guide: Range Bar Style
RangeBarStyle extends NumericStyledColumn.
RangeBarStyle
| Property | Type | Description | Default |
|---|---|---|---|
| BackColor | string | Background colour for the chart area when no CellRanges are supplied. | |
| CellTextProperties | BarStyleCellTextProperties | Optional cell-text overlay configuration. | |
| Marker | BarStyleMarker | Visual style of the cell-value marker. | { Shape: 'Diamond', Color: 'var(--ab-color-accent)', Size: 8 } |
| Max | RangeBarBound | Upper bound of the track for each row. | |
| Min | RangeBarBound | Lower bound of the track for each row. | |
| Orientation | 'Horizontal' | 'Vertical' | Orientation of the range bar. | 'Horizontal' |
| OutOfRange | RangeBarOutOfRangeProperties | Behaviour when the cell value falls outside [Min, Max], plus the optional marker colour override used by Mode: 'Clamp'. | |
| Reference | RangeBarReferenceProperties | 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. | |
| ToolTipText | CellTextOptions | Tooltip content — same tokens ('CellValue', 'PercentageValue') as Percent Bar / Bullet Chart. | |
| Track | RangeBarTrackProperties | Visual properties of the track (the line representing the [Min, Max] interval). |
NumericStyledColumn (inherited)
| Property | Type | Description | Default |
|---|---|---|---|
| CellRanges | CellColorRange[] | Ranges (e.g. to create traffic light effect) | |
| ColumnComparison | ColumnComparison | Compares Cell values to another Column | |
| RangeValueType | RangeValueType | Used with Ranges; can be Number (any number or Col-Min/Col-Max) or 'Percentage' (values 0-100) | Number |
CellColorRange
Used by CellRanges — optional qualitative bands behind the track (same conventions as Bullet Chart).
| Property | Type | Description |
|---|---|---|
| Color | string | Cell colour to use for values that fall inside Range |
| Max | number |DynamicRangeEndpoint | End of Range, can be literal number or DynamicRangeEndpoint |
| Min | number |DynamicRangeEndpoint | Start of Range, can be literal number or DynamicRangeEndpoint |
| ReverseGradient | boolean | Reverses the alpha ramp within this range only — values at the low end render saturated, values at the high end render faint. |
Min and Max also accept a DynamicRangeEndpoint:
| Value |
|---|
'Col-Min' |
'Col-Max' |
'Col-Avg' |
'Col-Median' |
ColumnComparison
Used by ColumnComparison.
| Property | Type | Description |
|---|---|---|
| Color | string | Colour to use for the Comparison |
| MaxValue | number | string | End value - either numeric value or Column ID |
| MinValue | number | string | Start value - either numeric value or Column ID |
RangeValueType
| Value |
|---|
'Number' |
'Percentage' |
RangeBarBound
Used by Min, Max and Reference (RangeBarBound):
| Value |
|---|
number |
string |
DynamicRangeEndpoint |
Marker
Marker is a BarStyleMarker
| Property | Type | Description | Default |
|---|---|---|---|
| Color | string | Marker colour. Defaults to the current text colour. | 'var(--ab-color-text)' |
| Shape | 'Line' | 'Triangle' | 'Dot' | 'Diamond' | Marker shape. | |
| Size | number | Line thickness (for Shape: 'Line') or shape size in px. |
CellTextOption
Used by CellText and ToolTipText:
| Value |
|---|
'CellValue' |
'PercentageValue' |
Icon Style
User guide: Icon Style
IconStyle
| Property | Type | Description | Default |
|---|---|---|---|
| Cell | CellBoxStyle | Optional stying (background / border / radius) for Cell behind the Icon | |
| CellTextProperties | IconCellTextProperties | 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). | |
| FallbackProperties | IconFallbackProperties | Behaviour when no mapping matches the cell value, plus the icon used by Mode: 'Icon'. | |
| Font | CellFontStyle | Optional cell-text styling applied to the companion text | |
| Gap | number | Pixel gap between the icon and the cell text (when shown). | 4 |
| Mappings | IconStyleMapping[] | Custom mappings for style (layered on top of a preset); leave undefined to use preset as-is | |
| MatchMode | IconStyleMatchMode | How Key is compared with the cell value (Exact or Case Insensitive) | 'Exact' |
| Preset | IconStyleBuiltInPreset | Built-in mappings to use for the Icon Style | |
| Size | number | Pixel size of icon glyph (square) | 18 |
| ToolTipText | ('CellValue' | 'IconDescription')[] | Tooltip content: CellValue (raw cell value) or IconDescription (matched mapping's Description) |
IconStyleMapping
Each entry in Mappings:
| Property | Type | Description |
|---|---|---|
| Description | string | 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 | IconStyleSpec | Icon to render when Key matches the cell value. |
| Key | string | number | boolean | Cell value that triggers this mapping. Compared using the parent (defaults to strict equality). |
IconStyleSpec
Used by Icon on each mapping and by FallbackIcon (IconStyleSpec):
| Value |
|---|
AdaptableIcon |
string |
IconStyleMatchMode
Used by MatchMode (IconStyleMatchMode):
| Value |
|---|
'Exact' |
'CaseInsensitive' |
IconStyleFallback
Used by Fallback (IconStyleFallback):
| Value |
|---|
'Hide' |
'ShowText' |
'Icon' |
IconStyleBuiltInPreset
Used by Preset to seed mappings in the wizard (IconStyleBuiltInPreset):
| Value |
|---|
'Flags' |
'Currencies' |
'Trend' |
'Status' |
CellBoxStyle
Used by Cell — optional box styling behind the icon.
| Property | Type | Description |
|---|---|---|
| BackColor | string | Colour background of cell: hex, rgb(a) or name |
| BorderColor | string | Colour of cell border: hex, rgb(a) or name |
| BorderRadius | number | Rounds corners of an element's outer border edge; equivalent of CSS border-radius |
CellFontStyle
Used by Font — styling for companion cell text.
| Property | Type | Description |
|---|---|---|
| Alignment | Alignment | Align to Left, Right or Center |
| FontSize | 'XSmall' | 'Small' | 'Medium' | 'Large' | 'XLarge' | Size of font: XSmall, Small, Medium, Large or XLarge |
| FontStyle | 'Normal' | 'Italic' | Style of font: Normal or Italic |
| FontWeight | 'Normal' | 'Bold' | Weight of font: Normal or Bold |
| ForeColor | string | Font colour in cell: hex, rgb(a) or name |
| TextDecoration | 'None' | 'Underline' | 'Overline' | 'LineThrough' | Decoration of font: None, Underline, Overline or LineThrough |
Cell text and tooltip tokens
CellText and ToolTipText accept an array of:
'CellValue' | 'IconDescription' — raw cell value, or the matched mapping's Description.
Styled Column API
The Styled Column API section of Adaptable API contains functions for managing Styled Columns:
| Method | Returns | Description |
|---|---|---|
| addStyledColumn(styledColumn) | void | Create a Styled column |
| canDisplaySparklines() | boolean | Can this AdapTable instance display Sparklines (e.g. is AG Grid SparklinesModule installed) |
| deleteAllStyledColumns() | void | Delete all Styled Columns in State |
| deleteStyledColumn(styledColumn) | void | Delete a Styled column |
| editStyledColumn(styledColumn) | StyledColumn | Edits a Styled Column |
| getActiveStyledColumnForColumn(column) | StyledColumn | undefined | Returns a Styled Column for a given column |
| getActiveStyledColumns(config) | StyledColumn[] | Retrieves all active (not-suspended) Styled Columns in Adaptable State |
| getStyledColumnById(id, config) | StyledColumn | Retrieves Styled Column by Id |
| getStyledColumnByName(name, config) | StyledColumn | undefined | Retrieves Styled Column by Name |
| getStyledColumnForColumnId(columnId, config) | StyledColumn | Retrieves Styled Column for given Column Id |
| getStyledColumns(config) | StyledColumn[] | Retrieves all Styled Columns in Adaptable State |
| getStyledColumnState() | StyledColumnState | Retrieves Styled Column section from Adaptable State |
| getSuspendedStyledColumns(config) | StyledColumn[] | Retrieves all suspended Styled Columns in Adaptable State |
| hasBulletChartStyle(columnId) | boolean | Checks whether Column with given columnId has a Bullet Chart Style applied |
| hasGradientStyle(columnId) | boolean | Checks whether Column with given columnId has a Gradient Style applied |
| hasPercentBarStyle(columnId) | boolean | Checks whether Column with given columnId has a PercentBar Style applied |
| hasRatingStyle(columnId) | boolean | Checks whether Column with given columnId has a Rating Style applied |
| isSparklineStyleStyledColumn(column) | boolean | Checks whether Column is a Sparkline Column |
| openStyledColumnSettingsPanel() | void | Open Styled Column section of Settings Panel |
| renderSparkline(options) | AgChartInstance<AgSparklineOptions> | null | Renders a standalone Sparkline into a DOM element you provide, using the same AG Charts engine as Sparkline Styled Columns. |
| suspendAllStyledColumn() | void | Suspends all Styled Columns |
| suspendStyledColumn(styledColumn) | void | Suspends an active Styled Column |
| unSuspendAllStyledColumn() | void | Activates all suspended Styled Column |
| unSuspendStyledColumn(styledColumn) | void | Activates a suspended Styled Column |