Providing a Custom Colour Palette

Summary

Developers are able to provide a custom colour set for run-time users to access when creating styles
These will replace the default set that AdapTable provides

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

By default the Color Picker contains this set of colours that AdapTable provides.

Colour	Hex Value	Example
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

Sometimes these default colours are not satisfactory, e.g. you might want your run-time users to access a set that reflects your application or organisation colour scheme.

In this case, you can use the colorPalette property in User Interface Options to provide a bespoke colour set.

Hint

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

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'];
  },
};

Adaptable Style: Custom Palette

Fork Fork

In this demo we have provided a custom set of colours to be used in the color palette via the colorPalette property in User Interface Options

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)

PreviousChoosing American English NextUI Technical Reference