Numeric Display Format

Summary

AdapTable provides a number of Display Formats to be used with Numeric Columns

AdapTable ships with a number of System Number Display Formats.

These are designed to provide Display Formats for numeric columns.

They are contained in the Number Formatter object defined as follows:

Property	Description
Abs	Returns absolute value of cell value
Ceiling	Returns smallest integer greater than cell value
Content	Replaces cell value with supplied value (that can contain Template Literals)
Empty	Show nothing in cell (but underlying value remains)
Floor	Returns largest integer cell value
FractionDigits	Number of digits to show in Fractions (up to 20)
FractionSeparator	Separator to use in fractions
IntegerDigits	Number of digits to show for Integers (up to 20)
IntegerSeparator	Separator to use in Integers
Multiplier	Multiplier to use on cell value
Parentheses	Shows negative numbers in parentheses
Prefix	Prefix to use before cell value
Round	Rounds cell value
Suffix	Suffix to use after cell value
Truncate	Truncates cell value

Numeric Presets

AdapTable provides 5 preset numeric formatters in the Format Column Wizard.

These are designed to help users easily create Display Format for the more common use cases:

Numeric Preset	Raw Value	Display Format
Percentage	0.54321	54.32%
K (Thousand)	123456	123.456K
M (Million)	123456789	123.456789M
Dollar	123.4567	$123.46
Sterling	123.4567	£123.46

Column Formatting: Numeric Display Formats

Fork Fork

This example shows 3 Display Formats on Numeric columns:
- Open/Total Issues, a Calculated Column, has a suffix of % and is limited to 2 decimal places
- Issue Change is given a negative parentheses format
- GitHub Stars has a K for 1000 format

Expand to see the Numeric Display Formats

FormatColumn: {
    FormatColumns: [
      {
        Name: 'FormatColumn-open-total-issue-ratio-109',
        Scope: {
          ColumnIds: ['open-total-issue-ratio'],
        },
        DisplayFormat: {
          Formatter: 'NumberFormatter',
          Options: {
            FractionDigits: 2,
            Suffix: '%',
            Multiplier: 100,
          },
        },
      },       
      {
        Name: 'FormatColumn-week_issue_change-110',
        Scope: {
          ColumnIds: ['week_issue_change'],
        },
        DisplayFormat: {
          Formatter: 'NumberFormatter',
          Options: {
            Parentheses: true,
          },
        },
      },
      {
        Name: 'FormatColumn-github_stars-111',
        Scope: {
          ColumnIds: ['github_stars'],
        },
        DisplayFormat: {
          Formatter: 'NumberFormatter',
          Options: {
            Multiplier: 0.001,
            Suffix: 'K',
          },
        },
      },
    ],
  },

import {AdaptableOptions} from '@adaptabletools/adaptable';
import {WebFramework} from './rowData';

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Numeric Display Formats',
  initialState: {
    Dashboard: {
      ModuleButtons: ['FormatColumn', 'SettingsPanel'],
    },
    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          Name: 'Standard Layout',
          TableColumns: [
            'name',
            'language',
            'open-total-issue-ratio',
            'created_at',
            'github_stars',
            'week_issue_change',
            'updated_at',
            'closed_pr_count',
          ],
          AutoSizeColumns: true,
        },
      ],
    },
    FormatColumn: {
      FormatColumns: [
        {
          Name: 'formatColumn-open-total-issue-ratio',
          Scope: {
            ColumnIds: ['open-total-issue-ratio'],
          },
          DisplayFormat: {
            Formatter: 'NumberFormatter',
            Options: {
              FractionDigits: 2,
              Suffix: '%',
              Multiplier: 100,
            },
          },
        },
        {
          Name: 'formatColumn-week_issue_change',
          Scope: {
            ColumnIds: ['week_issue_change'],
          },
          DisplayFormat: {
            Formatter: 'NumberFormatter',
            Options: {
              Parentheses: true,
            },
          },
        },
        {
          Name: 'formatColumn-github_stars',
          Scope: {
            ColumnIds: ['github_stars'],
          },
          DisplayFormat: {
            Formatter: 'NumberFormatter',
            Options: {
              Multiplier: 0.001,
              Suffix: 'K',
            },
          },
        },
      ],
    },
    CalculatedColumn: {
      CalculatedColumns: [
        {
          ColumnId: 'open-total-issue-ratio',
          Query: {
            ScalarExpression:
              '[open_pr_count]/([open_pr_count]+[closed_pr_count])',
          },
          CalculatedColumnSettings: {
            DataType: 'number',
          },
          FriendlyName: 'Open/Total Issues',
        },
      ],
    },
  },
};

PreviousDisplay Formats NextString Format

Framework: