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.

Format Columns use Scope meaning you can choose to apply a Format to one, some or all columns, or to columns of a particular DataType.

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.
  • String Columns: set text to show in Upper or Lower case or be trimmed

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).

Header Name
Format Column allows you to change the Header / Caption of any column so that it better fits your requirements.

This example has 8 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 and Cell Alignment of centre.
  • 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
  • ShipCountry has a Display Format to show text in Upper Case
  • Required Date has been changed to have a HeaderName of 'Reqd Dt'

Generating dummy data, please wait ...