Column Styling Overview

Being able to custom style and format cells, columns and rows is an important grid functionality.

Modules

AdapTable provides 2 modules that can style columns (and rows):

ModuleDescription
Format ColumnCreate a style, display format or cell alignment (to be used always for the column)
Conditional StyleStyles the column (and optiomally row) dynamically based on rules and cell values
tip

The key difference between the 2 Modules is that Format Column always styles every cell in the Column while Conditional Style does so only when a rule is met

important

Where both Modules are active Conditional Style will take precedence

Adaptable Style

Many Modules have a Style property which all reference the same Adaptable Style object. These include:

The contents of the Adaptable Style object are as follows:

warning

All properties in the object are nullable so only set those which differ from the current default in the grid

PropertyDescription
BackColorColour background of cell - provide a hex value.
BorderColorColour of cell border - provide a hex value.
ClassNameName of existing Css Class; use instead of setting other object properties
FontSizeSize of font: 'XSmall', 'Small', 'Medium', 'Large' or 'XLarge'
FontStyleStyle of the font: 'Normal' or 'Italic'
FontWeightWhether font appears as 'Normal' or 'Bold'
ForeColorFont colour in cell - provide a hex value.
ConditionalStyle: {
ConditionalStyles: [
{
Scope: {
All: true,
},
Style: {
BackColor: 'green',
FontStyle: 'Italic',
ForeColor: '#ffffe0',
FontWeight: 'Bold'
},
Rule:{
BooleanExpression: '[notional] > 1400',
}
},
],
},

ClassName

The Style object includes a ClassName property that enables a css style name to be provided which AdapTable will use.

important

Other properties in the Style object will take precedence if 2 css properties are both set

User Interface Options has a collection entitled styleClassNames, which lists all the css classes that the user is able to pick in the Style screen.

If this property is populated then forms which show the Style dialog will additionally display a dropdown containing all the values in the array.

tip

If providing the object in Predefined Config the style name doesn't need to be included in styleClassNames

caution

Make sure to include a style element with the same name in your own CSS files

// Add 4 styles in a css file
.brownStyle {
color: brown;
font-weight: normal !important;
}
.yellowStyle {
background: lightyellow !important;
font-style: italic !important;
}
.darkGreenStyle {
color: darkgreen !important;
}
.darkRedStyle {
color: darkred !important;
font-weight:bolder !important;
}
// List the 4 named Css Styles User Interface Options
// This means they will be listed in the dropdown in the Style Wizard
adaptableOptions.userInterfaceOptions = {
styleClassNames: ['brownStyle', 'yellowStyle','darkGreenStyle' , 'darkRedStyle'],
};
// Reference the Styles in Quick Search, Conditional Style and Format Column Config
adaptableOptions.predefinedConfig: {
QuickSearch: {
Style: {
ClassName: 'brownStyle'
},
},
FormatColumn: {
FormatColumns: [
{
Scope: {
ColumnIds: ['bid'],
},
Style: {
ClassName: 'yellowStyle'
},
}
],
},
ConditionalStyle: {
ConditionalStyles: [
{
Scope: {
DataTypes: ['Number'],
},
Style: {
ClassName: 'darkGreenStyle',
},
Rule: {
Predicate: {
PredicateId: 'Positive',
},
},
},
{
Scope: {
DataTypes: ['Number'],
},
Style: {
ClassName: 'darkRedStyle',
},
Rule: {
Predicate: {
PredicateId: 'Negative',
},
},
},
],
},
}

Checkbox Column Clicked Event

This is an Adaptable Event which is fired when the checkbox is clicked in a (boolean) Checkbox Column.

note

Checkbox Columns are provided by the Format Column Module

CheckboxColumnClickedInfo

PropertyDescription
columnName of Column where Checkbox was clicked
isCheckedWhether or not the Checkbox is checked
primaryKeyValueValue in Primary Key Column for row where Checkbox was clicked
rowDataData in the row where the Checkbox was clicked

Event Subscription

Subscribing to the Event is done the same as with all Adaptable Events:

api.eventApi.on('CheckboxColumnClicked', (eventInfo: CheckboxColumnClickedInfo) => {
// do something with the info
});

More Information