Format Column Config

The Predefined Configuration for the Format Column function

Format Column State

PropertyDescription
FormatColumnsCollection of Format Columns

Format Column Object

A FormatColumn object is defined as follows:

PropertyDescription
CellAlignmentShould cells align to 'Left' of 'Right' or 'Center'
DisplayFormatAny Display Format to apply to the (Numeric or Date) Column
HeaderNameText to display in Column Header (doesn't change ColumnId)
ScopeWhere the Format Column will be applied - can be whole Row, some Columns or all Colunns of given DataType
StyleThe Style to apply to the Column

Adaptable Format Object

The DisplayFormat property is of type AdaptableFormat which contains 3 options:

Number Formatter

This applies on Numeric columns.

It contains the Number Formatter Options object which includes a series of formatting options:

PropertyDescription
FractionDigitsNumber of digits to show in fractions
FractionSeparatorSeparator to use in fractions
IntegerDigitsNumber of digits to show for integers
IntegerSeparatorSeparator to use in integers
MultiplierMultiplier to use on the number
ParenthesesShows negative numbers in parentheses
PrefixPrefix to use before the number
SuffixSuffix to use after the number

Date Formatter

This applies on Date columns.

It contains the Date Formatter Options object which has a single Pattern property:

PropertyDescription
PatternPattern to use for Date Format

String Formatter

This applies on String columns.

It contains the String Formatter Options object which enables strings to be trimmed and have case set:

PropertyDescription
CaseSets text to Upper or Lower case
TrimTrims text (both start and end)

Example

const demoConfig: PredefinedConfig = {
FormatColumn: {
FormatColumns: [
// Set a Style for OrderId
{
Scope: {
ColumnIds: ['OrderId'],
},
Style: {
BackColor: '#d4fb79',
ForeColor: '#8b0000',
},
},
// Set a Time-based Display Format for LastUpdatedTime
{
Scope: {
ColumnIds: ['LastUpdatedTime'],
},
DisplayFormat: {
Formatter: 'DateFormatter',
Options: {
Pattern: 'HH:mm:ss',
},
},
},
// Set both a Style and a (Date-based) Display Format for OrderDate
{
Scope: {
ColumnIds: ['OrderDate'],
},
Style: {
FontWeight: 'Bold',
FontSize: 'XSmall',
FontStyle: 'Italic',
},
DisplayFormat: {
Formatter: 'DateFormatter',
Options: {
Pattern: 'yyyyMMdd',
},
},
},
// Set a Display Format of negative parentheses for ChangeLastOrder
// and change the Header (caption) to 'Order Change'
{
Scope: {
ColumnIds: ['ChangeLastOrder'],
},
HeaderName: 'Order Change',
DisplayFormat: {
Formatter: 'NumberFormatter',
Options: {
Parentheses: true,
},
},
},
// Set a Display Format of £ and 2 dp for InvoicedCost
{
Scope: {
ColumnIds: ['InvoicedCost'],
},
DisplayFormat: {
Formatter: 'NumberFormatter',
Options: {
FractionDigits: 2,
Prefix: '£',
},
},
},
// Set a Display Format of $ with 'AUD' suffix and space for integer separator for OrderCost
{
Scope: {
ColumnIds: ['OrderCost'],
},
DisplayFormat: {
Formatter: 'NumberFormatter',
Options: {
FractionDigits: 2,
IntegerSeparator: ' ',
Prefix: '$',
Suffix: '(AUD)',
},
},
},
// Set text in the 'Country' Column to be upper case
{
Scope: {
ColumnIds: ['country'],
},
DisplayFormat: {
Formatter: 'StringFormatter',
Options: {
Case: 'Upper',
},
},
CellAlignment: 'Center',
},
],
},
} as PredefinedConfig;

More Information