AdapTable Version:

Framework:

Adaptable Style Object

Summary

The Adaptable Style object enables all Adaptable Object that contain a style to share a common interface
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.

UI Step by Step Guide

Setting an Adaptable Style in a Settings Panel Wizard

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 39, 69, 245, 0.8 (though rgb can also be used)

Expand to see the Colours

QuickSearch: {
  QuickSearchText: 'Javas',
  Style: {
    ForeColor: '#765341', // provided a Hex value
    BackColor: 'LightGreen', // provided a named colour
    BorderColor: 'rgba(39, 69, 245, 0.8)', // provided a rgba value
  },
},

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.

Deep Dive

Default colours in the Colour Picker

By default the Color Picker contains these values:

Colour	Hex Value
BLACK	#000000
WHITE	#FFFFFF
LIGHT GRAY	#D3D3D3
GRAY	#808080
DARK GREEN	#006400
GREEN	#008000
LIME GREEN	#32CD32
BROWN	#A52A2A
YELLOW	#FFFF00
LIGHT YELLOW	#FFFFE0
DARK BLUE	#00008B
BLUE	#0000FF
LIGHT BLUE	#87CEFA
CYAN	#00FFFF
MAGENTA	#FF00FF
PURPLE	#800080
DARK RED	#8B0000
RED	#FF0000
LIGHT RED	#DC143C
ORANGE	#FFA500

Developers can use the colorPalette property in User Interface Options to provide an alternative colour set.

colorPalette

string[]

Allows users to define their own colours to be used in the Colour Picker when creating an Adaptable Style

This property allows developers to provide their own set of colours, instead of the default set that AdapTable provides, which will be displayed in the Colour Picker.

Developers can provide either a string array (of hex values):

adaptableOptions.userInterfaceOptions = {
  colorPalette: ['#D3D3D3', '#808080', '#A52A2A', '#006400'],
};

or a function which returns a string array (of hex values):

adaptableOptions.userInterfaceOptions = {
  colorPalette: () => {
    return ['#D3D3D3', '#808080', '#A52A2A', '#006400'];
  },
};

Note

The property can either provide a list of Hex values or a function that returns a list of Hex values

Adaptable Style: Custom Palette

Fork Fork

In this demo we have provided a custom set of colours to be used in the color palette

Expand to see the Colour Palette Provided

Try It Out

Create a new Format Column
In the Style Selection open the dropdown for the 3 Colour properties

AdapTable Colour Picker

(Recorded with AdapTable v13.1)

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.

DO more here as commonly mentioned.

Hint

If the classname is provided in the styleClassNames property of User Interface Options, the available CSS style classes will be listed in the UI configuration panel for run-time selection

Caution

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

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: