AdapTable Version:

Framework:

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:

All of these different styles are defined using the same AdaptableStyle object.

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 overridden by developers via the colorPalette property (see below)

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 as they are mutually exclusive

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 (default)
centre
right

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 object comprises these properties:

Hint

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

Property	Description
Alignment	Align to `Left`, `Right` or `Center`
BackColor	Colour background of cell: hex, rgb(a) or name
BorderColor	Colour of cell border: hex, rgb(a) or name
BorderRadius	Rounds corners of an element's outer border edge; equivalent of CSS border-radius
ClassName	Existing CSS Class; use instead of setting other object properties
FontSize	Size of font: `XSmall`, `Small`, `Medium`, `Large` or `XLarge`
FontStyle	Style of font: `Normal` or `Italic`
FontWeight	Weight of font: `Normal` or `Bold`
ForeColor	Font colour in cell: hex, rgb(a) or name
TextDecoration	Decoration of font: `None`, `Underline`, `Overline` or `LineThrough`

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)

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

Developers can use the colorPalette property in User Interface Options to provide an alternative colour set
See the UI Tutorial on Providing a Custom Colour Palette for more details

CSS Class Option

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)"

PreviousRendering Custom Popups NextDisplaying AdapTable Buttons

Framework: