Applying AdapTable Style
Summary
- Format Columns can be given an AdapTable Style
- Styles can be either always rendered or when a Condition is met
- Styles consist of 2 types of properties:
- Colours - for Text, Cell Background and Border
- Font - Size, Style, Weight
- There is also an option to use supplied CSS Classes if required
Format Columns in AdapTable can be provided with a Style which is used when the column is rendered.
This style can be one of 2 types:
- an AdapTable Style object
- a CSS Style
Hint
Use Conditional Styling when the style should apply only when a particular rule is met
AdapTable Style
The most basic type of Format Column uses an Adaptable Style.
This will render all Scoped Cells in the Format Column (or those which meet the Condition, if one is set).
The Style defines fore, back and border colours and a selection of font-related and alignment properties:
| Property | Type | Description |
|---|---|---|
| ClassName | string | Existing CSS Class; use instead of setting other object properties |
Find Out More
The Adaptable Style is used in a number of places in AdapTable where styling is required
- This example has 3 Format Columns provided which display a Column Style:
Namecolumn is boldLanguagecolumn has a blue background and yellow text color (and a Cell Alignment of Center)- all
Numbercolumns are italic
CSS Style
It is possible to apply existing CSS styles to the cell instead of defining the styles individually.
Hint
This is done by specifying the property ClassName which references a defined CSS class
Find Out More
See Setting CSS Style for Adaptable Style for more information
- This demo showcases applying external CSS classes to Format Columns:
- all numeric columns show the
rednumberCSS class - the
LanguageandLicensecolumns show thebluetextCSS class
- all numeric columns show the