Format Column Demo

The Format Column Function allows you to style an entire column. Unlike Conditional Styles, the Format Column style is always applied, irrespective of the data in the cell.

You can provide either a visual Style, a Display Format (or both).

Display Format
Display Formats enable you to provide a display value for a columns that fits your requirements without it changing the underlying cell value. They work on:

  • Date Columns: use a preset value or provide your own Date or Time format (which matches the available patterns).
  • Numeric Columns: set values for Prefix, Suffix, Fraction Separator, Integer Separator, Fraction Digits, Integer Digits, Multiplier and Negative Parentheses etc.

Visual Style
Format Columns use the same Style builder as Quick Search and Conditional Styles, which allows you to name key elements of the style.

Alternatively you can specify a css style name in Format Colunn Predefined Config (which you must provide in your css).

This example has 6 Format Columns:

  • Order Id has Visual Style of lime green with a red fore colour
  • LastUpdatedTime has a Display Format with pattern of 'HH:mm:ss' to show just time
  • Order Date has a Visual Style of bold and italicised and with a smaller font and a Display Format with pattern of 'yyyyMMdd'
  • ChangeLastOrder has a Display Format to show negative numbers in parantheses.
  • InvoicedCost has a Display Format to show '£' sign and 2 decimal places
  • OrderCost has a Display Format to separate integer thousands with a space, a '$' prefix and '(AUD)' suffix

Generating dummy data, please wait ...