String Display Format

Summary

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

AdapTable ships with a number of System String Display Formats.

These are designed to provide Display Formats for string columns.

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

Property	Type	Description
Case	`'Upper' \| 'Lower' \| 'Sentence'`	Sets text to Upper, Lower or Sentence case
Content	`string`	Replaces cell value; useful when using Condition (e.g. replace null with 'N/A')
Empty	`boolean`	Show nothing in cell (but underlying value remains)
Prefix	`string`	Prefix to use before the cell text
Suffix	`string`	Suffix to use after the cell text
Trim	`boolean`	Trims text (both start and end)

Caution

There are no presets available for string columns

Column Formatting: String Display Formats

Fork Fork

In this example 4 System String Display Formats are provided:
- Name is uppercase
- Language is given a Prefix of 'Lang-'
- Description is set to Content of "[Too long to show...]" - using Condition (leveraging the LEN AdapTableQL Expression Function) that cell value is over 100 characters
- License shows as Empty - using Condition where Cell Value was 'Other'

Expand to see the String Display Formats

FormatColumn: {
  FormatColumns: [
    {
      Name: 'FormatColumn-name-105',
      Scope: {
        ColumnIds: ['name'],
      },
      DisplayFormat: {
        Formatter: 'StringFormatter',
        Options: {
          Case: 'Upper',
          Trim: false,
        },
      },
    },
    {
      Name: 'FormatColumn-language-106',
      Scope: {
        ColumnIds: ['language'],
      },
      DisplayFormat: {
        Formatter: 'StringFormatter',
        Options: {
          Prefix: 'Lang: ',
        },
      },
    },
    {
      Name: 'FormatColumn-topics-107',
      Scope: {
        ColumnIds: ['topics'],
      },
      DisplayFormat: {
        Formatter: 'StringFormatter',
        Options: {
          Content: '[Too many to list]',
        },
      },
      Rule: {
        BooleanExpression: 'LEN([topics] )  > 100',
      },
    },
    {
      Name: 'FormatColumn-license-108',
      Scope: {
        ColumnIds: ['license'],
      },
      DisplayFormat: {
        Formatter: 'StringFormatter',
        Options: {
          Empty: true,
        },
      },
      Rule: {
        Predicates: [
          {
            PredicateId: 'Is',
            Inputs: ['Other'],
          },
        ],
      },
    },
  ],
},

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

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'String Display Formats',
  initialState: {
    Dashboard: {
      ModuleButtons: ['FormatColumn', 'SettingsPanel'],
    },
    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          Name: 'Standard Layout',
          TableColumns: [
            'name',
            'language',
            'description',
            'license',
            'created_at',
            'updated_at',
            'week_issue_change',
            'github_stars',
            'closed_pr_count',
          ],
          ColumnSorts: [
            {
              ColumnId: 'week_issue_change',
              SortOrder: 'Asc',
            },
          ],
          AutoSizeColumns: true,
        },
      ],
    },
    FormatColumn: {
      FormatColumns: [
        {
          Name: 'formatColumn-name',
          Scope: {
            ColumnIds: ['name'],
          },
          DisplayFormat: {
            Formatter: 'StringFormatter',
            Options: {
              Case: 'Upper',
              Trim: false,
            },
          },
        },
        {
          Name: 'formatColumn-language',
          Scope: {
            ColumnIds: ['language'],
          },
          DisplayFormat: {
            Formatter: 'StringFormatter',
            Options: {
              Prefix: 'Lang: ',
            },
          },
        },
        {
          Name: 'formatColumn-description',
          Scope: {
            ColumnIds: ['description'],
          },
          DisplayFormat: {
            Formatter: 'StringFormatter',
            Options: {
              Content: '[Too long to show...]',
            },
          },
          Rule: {
            BooleanExpression: 'LEN([description])  > 75',
          },
        },
        {
          Name: 'formatColumn-license',
          Scope: {
            ColumnIds: ['license'],
          },
          DisplayFormat: {
            Formatter: 'StringFormatter',
            Options: {
              Empty: true,
            },
          },
          Rule: {
            Predicates: [
              {
                PredicateId: 'Is',
                Inputs: ['Other'],
              },
            ],
          },
        },
      ],
    },
  },
};

FAQ

Are there string Display Format presets? No. String columns use StringFormatter options only (Case, Trim, Prefix, Suffix, Content, Empty).

Can we replace long text with a fixed message? Yes. Set Content to the replacement text and add a Condition (as in the demo for topics).

Can we hide the cell text but keep the value? Yes. Set Empty: true (often with a Condition). The underlying value is unchanged.

PreviousNumeric Format NextDate Format