Display Format

Summary

Display Formats are used to format the text displayed in Cells
AdapTable provides a number of System Display Formats that can be configured for:
- Numeric columns (with presets for UI convencience)
- Date columns (with presets for UI convencience)
- String columns
Additionally developers can provide their own Custom Display Formats
Conditions can be added so that only cells with meet the Rule are formatted

Format Columns can be provided with a Display Format.

This defines how the value in each cell in the column is formatted.

Hint

Provide a Column Formatting Condition if you want the Display Format only to apply when a rule is met

Note

Setting a Display Format does not change the underlying cell value

AdapTable provides 3 sets of System Display Formats, based on the data type of the Column:

Hint

AdapTable also provides Numeric and Date presets for commonly-added Formats

In addition developers can provide Custom Display Formats if the System Display Formats are insufficient.

Caution

When a Display Format is applied, any Column Filters will be evaluated on the column's underlying (i.e. raw) value

Column Formatting: Display Formats

Fork Fork

This example shows 3 different System Display Formats - one for each column type
- The Name String Column is uppercase
- The Created Date Column has a a bespoke Date format
- The Issue Change Numeric Column shows negative numbers in parentheses

Display Format Precedence

Display Formats follow the same rules as general Column Formatting Precedence.

Namely, the Display Formats are evaluated in the order they are provided in Initial Adaptable State or the UI.

Hint

This allows you create multiple display formats for the same column which will be evaluated in the order provided

Column Formatting: Format Precedence

Fork Fork

In this demo we provide 2 Display Formats - each with a Condition - both on the Github Stars Column:
- Any cells > 1,000,000 will display as xM
- Any cells > 1,000 will display as xK
- Any cells under 1000 will display normally
Note: We need to put the 'Million' condition first, as otherwise only the Thousand condition will display

Expand to see the Custom Display Formats

FormatColumn: {
  FormatColumns: [
    {
      Name: 'FormatColumn-github_stars-101',
      Scope: {
        ColumnIds: ['github_stars'],
      },
      Rule: {
        Predicates: [{
          PredicateId: 'GreaterThan',
          Inputs: [1000000],
        }],
      },
      DisplayFormat: {
        Formatter: 'NumberFormatter',
        Options: {
          Multiplier: 0.000001,
          Suffix: 'M',
          FractionDigits: 2,
        },
      },
    },
    {
      Name: 'FormatColumn-github_stars-102',
      Scope: {
        ColumnIds: ['github_stars'],
      },
      Rule: {
        Predicates: [{
          PredicateId: 'GreaterThan',
          Inputs: [1000],
        }],
      },
      DisplayFormat: {
        Formatter: 'NumberFormatter',
        Options: {
          Multiplier: 0.001,
          Suffix: 'K',
          FractionDigits: 2,
        },
      },
    },
  ],
},

Format Columns: Custom Content

(Recorded with AdapTable v15.2)

FAQ

Can we show a currency in the Display Format? Yes. Create a prefix (or suffix) as appropriate

Can we set negative numbers to appear in parentheses? Yes. Check the Parentheses checkbox in the Display Format stage of the wizard.

Can we show percentages? Yes, this is common requirement is typically done by setting the Multiplier property to 100 and the Suffix to '%'

Can divide numbers e.g. show 50,000 as 50K? Yes, use the multiplier as a divider (so in this case it would be 0.001) and then add a suffice of 'K'

Hint

Because this is quite a common display format it is also available as a Numeric Preset

Can we see just the time portion of a Date? Yes. Set the Display Format to show the time portion only (e.g. see the 'HH:mm:ss' preset which displays the time using a 24 hour clock)

If we show no fractions do you round the number? Yes, AdapTable will round the number automatically e.g. setting 11.87 to 0 fractions will display '12'.

Can we provide our own formats if what we need is missing from the supplied list? Yes, Custom Display Formats were added in Version 12

AdapTable Resources

PreviousStyles NextNumeric Format