You can configure the appearance of a column by either:

  1. Setting options within the component editor.
  2. Right-Clicking on the column and selecting a formatter.
  3. Adding an _SD_FORMATTER at the end of the column name.
    For example if a column was call itemPrice, you could name it itemPrice_SD_CURUSD to show the price as a currency in US Dollars.

This article will cover the third option, complex custom formatting of rows/columns, you should first see our simple formatting page for most use-cases.

Highlighting and Formatting by Row:

Example Table Highlighting Rows

Highlighting and styling relies on having an additional column named similarly to the column you want to affect.
For example to style a column called itemPrice, you could add an additional column called itemPrice_SD_CURUSD to show the price as a currency in US Dollars.
This allows you to customize the foreground/background and style per row.

Area Column Name Postfix Example Value Description
Background Color _SD_BG #FF0000 Set the background colour of the original column.
HTML Colors can be specified as names or values.
Foreground Color _SD_FG #FF0000 Set the foreground colour of the original column.
HTML Colors can be specified as names or values.
CSS Style Name(s) _SD_CLASS sd_cell_red sd_cell_green Set the CSS class of the original column.
Format Code _SD_CODE 0.xXXx 0.xxXX 0.xXX Configure the number of decimal places displayed AND which of the digits are shown larger. This is useful for emphasising basis points for FX currencies etc.