Format Column Config
The Predefined Configuration for the Format Column function
Format Column State
| Property | Description |
|---|---|
| FormatColumns | Collection of Format Columns |
Format Column Object
A FormatColumn object is defined as follows:
| Property | Description |
|---|---|
| CellAlignment | Should cells align to 'Left' of 'Right' or 'Center' |
| DisplayFormat | Any Display Format to apply to the (Numeric or Date) Column |
| HeaderName | Text to display in Column Header (doesn't change ColumnId) |
| Scope | Where the Format Column will be applied - can be whole Row, some Columns or all Colunns of given DataType |
| Style | The 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:
| Property | Description |
|---|---|
| FractionDigits | Number of digits to show in fractions |
| FractionSeparator | Separator to use in fractions |
| IntegerDigits | Number of digits to show for integers |
| IntegerSeparator | Separator to use in integers |
| Multiplier | Multiplier to use on the number |
| Parentheses | Shows negative numbers in parentheses |
| Prefix | Prefix to use before the number |
| Suffix | Suffix 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:
| Property | Description |
|---|---|
| Pattern | Pattern 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:
| Property | Description |
|---|---|
| Case | Sets text to Upper or Lower case |
| Trim | Trims 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;