Adaptable Style

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

The contents of the 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

Property	Description
BackColor	Colour background of cell - provide a hex value.
ClassName	Name of existing Css Class; use this instead of setting other object properties
FontSize	Size of the font e.g. 'Small', 'Medium' or'Large'
FontStyle	Style of the font e.g. 'Normal' or 'Italic'
FontWeight	How font appears e.g. 'Normal' or 'Bold'
ForeColor	Font colour in cell - provide a hex value.

 ConditionalStyle: {
    ConditionalStyles: [
    {
        Scope: {
          All: true,
        },
        Style: {
          BackColor: 'green',
          FontStyle: 'Italic',
          ForeColor: '#ffffe0',
          FontWeight: 'Bold'
        },
        Expression: '[notional] > 1400',
    },
    ],
  },

ClassName

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

caution

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

The User Interface section of Predefined Config has a StyleClassNames property. This 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 teh array.

tip

If you are providing the object in predefined config, the style name provided doesn't need to be present in the User Interface config.

important

Make sure to include a style element with the same name in your own css files. This is your responsibility.

// Add 2 styles in a css file
.styleBackBrown {
  color: brown;
  font-weight: normal !important;
}

.styleForeYellow {
  background: lightyellow !important;
  font-style: bold !important;
}


//Create 2 named Css Styles in the User Interface config
// And then reference them in Quick Search and Format Column Config
// We will also include the style itself in our .css file
UserInterface: {
    StyleClassNames: [
        'styleBackBrown',
        'styleForeYellow'
    ]
},
QuickSearch: {
  Style: {
      ClassName: 'styleBackGreen'
  },
},
FormatColumn: {
    FormatColumns: [
    {
        Scope: {
            ColumnIds: ['bid'],
        },
        Style: {
            ClassName: 'styleForeYellow'
        },
    }
    ],
},

warning

ClassName#

caution

tip

important

ClassName