Adaptable Style Object

Summary

The Adaptable Style object is the common UI interface for all Adaptable Object
It can comprise either a group of style-related properties or a CSS Classname to be used

There are several places in AdapTable where a custom style can be provided, including:

Column Formatting — base styling on a column, optionally rule-driven
Quick Search — highlighting matched cells
Flashing Cells — the up / down flash colours
Alerts — the alert-row highlight style
Styled Columns — every styled column type accepts at least one slice of the same object (e.g. Badge, Gradient, Rating, Sparkline, etc.)

Note

All of these styles are defined using the same AdaptableStyle object
Styled Columns typically use only one of its two reusable halves (CellFontStyle for text, CellBoxStyle for chrome)

Using Adaptable Style

The Adaptable UI makes it easy for run-time users to set an Adaptable Style when creating an object.

UI Step by Step Guide

Setting an Adaptable Style in a Settings Panel Wizard

These are the steps involved:

Select Colours

There are 3 Colour properties that can be provided to colour different parts of the Cell:

Back Colour
Fore (i.e. font) Colour
Border Colour

The wizard will show the browser's native colour picker allowing you to provide any colour you wish.

For each Colour property, an Opacity can also be set allowing for transparency to be added.

Hint

AdapTable provides a default set of colours to display in the Colour Picker
However these can be customised by developers via theme CSS variables (see Providing a Custom Colour Palette)

Select Border Radius

Provide a numeric Radius for the border of the Cell

Select Font Style

There are 2 Font Style Properties that can be selected:

Bold
Italic

Select Text Decoraton

There are 3 Text Decoration properties that can be selected:

Underline
Strikethrough
Overline

Note

Only one of these can be selected — they are mutually exclusive
The wizard label "Strikethrough" maps to the API value TextDecoration: 'LineThrough' (the underlying CSS keyword), so when setting it through Initial Adaptable State use 'LineThrough', not 'Strikethrough'

Select Font Size

There are 6 properties available for Font Size:

Default (i.e. what is already provided through CSS will be used)
XSmall
Small
Medium
Large
XLarge

Select Cell Alignment

Choose how Cells will align in the formatted Cells. Options are:

left
centre
right

Un-pressing all three buttons clears any explicit override and lets the column / grid default win. When set through the API this corresponds to Alignment: 'Default' (which AdapTable treats the same as omitting the property).

Alternatively: Select a CSS Name

If any Css ClassNames have been provided in User Interface Options a dropdown will be displayed allowing this to be used instead of creating a Style.

Configuring Adaptable Style

The AdaptableStyle extends 2 objects - CellFontStyle and CellBoxStyle.

Hint

All the properties are optional, so set only those that differ from the current default in the grid

CellFontStyle contains font-related properties and is defined as follows:

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`

CellBoxStyle contains cell-related properties and is defined as follows:

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

Slice Composition

As noted above, AdaptableStyle is the union of two reusable interfaces (CellFontStyle & CellBoxStyle).

For most consumers (Format Column, Quick Search, Flashing Cells, Alerts, Badge Style) you continue to set the full AdaptableStyle and the slice split is invisible — same flat object, same wizard.

The slices become visible on Styled Columns whose renderer paints something other than plain text — Gradient, Percent Bar, Bullet Chart, Rating, Sparkline, Icon, Range Bar.

In this use case, the styled column accepts one of 2 properties:

Font?: CellFontStyle — when the renderer paints non-text primary content (e.g. a Gradient tint, a Percent Bar) but you still want to control how the value text on top of it is rendered
Cell?: CellBoxStyle — when the renderer paints into the cell content but leaves the cell box alone (e.g. Rating stars, a Sparkline mini-chart) and you want to opt-in to a tinted background or rounded border

The point is so a Styled Column can claim half of the style space without inheriting the other half from any Format Column on the same column.

Hint

The wizard still edits the whole AdaptableStyle for the "full" consumers
Styled Column wizards present whichever half is meaningful to that styled column
For instance, the Gradient wizard's Font section edits a CellFontStyle, the Rating wizard's Cell section edits a CellBoxStyle.

Find Out More

See Styled Columns Overview for the full slice-based precedence model

Colour Properties

The colour related properties can be provided in 4 ways:

Hex Value
Name of the Colour (which the browser will convert)
RGB Value
RGBA Value (if transparency is required)

Note

When providing colours in Initial Adaptable State or API code, you can also reference a theme CSS variable
e.g. BackColor: 'var(--ab-color-destructive)' or ForeColor: 'var(--ab-color-palette-4)'

Find Out More

The value resolves against the active theme at run time, whether the shipped theme or one customised by you
See Referencing Themes for full details on how to do this

Adaptable Style: Color Picker

Fork Fork

In this demo we have set the colours for the Quick Search Matching Cell Style in 3 different ways:
- ForeColor used Hex value of #765341'
- BackColor used 'hard-coded' value of 'LightGreen'
- BorderColor used rgba value of 245, 245, 245, 1 (though rgb can also be used)
We also added a BorderRadius of 8 to create a nicer visual effect

Try It Out

Run different searches and see the style applied

Colour Palette

AdapTable displays a Color Picker when users need to select colours in an Adaptable Style.

By default this contains a set of colours that AdapTable provides.

Find Out More

Customise the default set by overriding --ab-color-swatch-*, --ab-color-palette-*, and semantic --ab-color-* variables on the light and/or dark theme
See the UI Tutorial on Providing a Custom Colour Palette for more details

CSS Class Option

The AdaptableStyle object also contains a CSS related property:

Property	Type	Description
ClassName	`string`	Existing CSS Class; use instead of setting other object properties

The ClassName property references an pre-existing CSS style class which, when specified, is applied to the corresponding grid cell in AG Grid.

Caution

Make sure that the referenced CSS Class is provided with your application

This CSS Class is one that is included in the css for the application.

Hint

You can also provide the CSS classname in the styleClassNames property of User Interface Options
This will ensure the CSS style classes is also listed in the UI configuration panel for run-time selection

The following steps are required:

Developer Guide

Providing CSS Class Names to an Adaptable Style

These are the steps involved:

// CSS file
.darkGreenStyle {
  color: darkgreen !important;
}
.darkRedStyle {
  color: darkred !important;
}
.boldBrownStyle {
  color: brown;
  font-weight: bolder !important;
}

Define and provide the CSS styles

The CSS class definitions have to be available at runtime, so should be included in the stylesheets provided to the application

const adaptableOptions: AdaptableOptions = {
  userInterfaceOptions: {
    styleClassNames: ['boldBrownStyle', 'darkGreenStyle', 'darkRedStyle'],
  },
};

Make the CSS classes available in runtime UI

Items included in the styleClassNames property of User Interface Options are available dynamcially at run-time.

They will appear in in Adaptable UI wizards and can be selected by users when creating or editing Adaptable Objects.

const adaptableOptions: AdaptableOptions = {
  initialState: {
    QuickSearch: {
      Style: {ClassName: 'boldBrownStyle'},
    },
    FormatColumn: {
      FormatColumns: [
        {
          Name: 'FormatColumn-number-206',
          Scope: {DataTypes: ['number']},
          Style: {ClassName: 'darkGreenStyle'},
          Rule: {
            Predicates: [{PredicateId: 'Positive'}],
          },
        },
        {
          Name: 'FormatColumn-number-207',
          Scope: {DataTypes: ['number']},
          Style: {ClassName: 'darkRedStyle'},
          Rule: {
            Predicates: [{PredicateId: 'Negative'}],
          },
        },
      ],
    },
  },
};

Reference ClassNames in Initial Adaptable State

In addition the ClassName can be provided at design-time through Initial Adaptable State.

This will be applied automatically by AdapTable to the relevant objects and Modules.

FAQ

Can I provide transparency to the colour? Yes, this was added in Version 13.1. You can now provide a colour as rgba:

BackColor: "rgba(255, 255, 224, 0.3)"

PreviousStyling Editable & ReadOnly Cells NextDisplaying AdapTable Buttons