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.
Clickable Link _SD_LINK https://example.com/trade/123 Turns the cell into a clickable link.
If a column named colName_SD_LINK exists and contains a URL, clicking the value in colName will open that link.