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	Description
Case	Sets text to Upper or Lower case
Content	Replaces cell value; useful when using Condition (e.g. replace null with 'N/A')
Empty	Show nothing in cell (but underlying value remains)
Prefix	Prefix to use before the cell text
Suffix	Suffix to use after the cell text
Trim	Trims text (both start and end)

String Presets

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'],
              },
            ],
          },
        },
      ],
    },
  },
};

PreviousNumeric Format NextDate Format

Framework: