AdapTable Version:

Framework:

Badge Style

Summary

Badge Styles are where the values in the Column's cells are decorated with a label
There can be multiple Badges in a Column and they can include Icons

The Badge Style renders the text of a Cell inside a "Badge" (sometimes known as a label).

The Badge is styled (i.e. coloured and typically given a rounded border).

Caution

Badges can only be applied to Numeric or String columns

Multiple Badges can be provided for each Column using Rules.

Badges can optionally include an Icon to display next to the text.

Hint

It is also possible to provide an Icon-only Badge where no text is displayed

Badge Styled Columns

Fork Fork

This example contains 5 Columns with Badge Styles:
- Name - with every Badge in gray
- Language - with no Badge Style applied, and a different Custom Icon displayed for the 3 different languages
- License - with a differently styled Badge for the 3 different licences
- Closed Issues - with 3 different Badge Styles based on the number of Issues, each with its own AdapTable Icon
- Topics - an array column that shows each item in its own Badge - special Badges for TypeScript and JavaScript and the others with a default Badge

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

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Badge Styled Columns',
  initialState: {
    Dashboard: {
      ModuleButtons: ['StyledColumn', 'SettingsPanel'],
    },
    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'StyledColumn',
      Layouts: [
        {
          Name: 'StyledColumn',
          TableColumns: [
            'name',
            'github_stars',
            'language',
            'open_issues_count',
            'license',
            'open_pr_count',
            'closed_issues_count',
            'topics',
            'closed_pr_count',
            'has_wiki',
            'week_issue_change',
            'has_projects',
          ],
          AutoSizeColumns: true,
          ColumnSizing: {
            name: {Width: 100},
            github_stars: {Width: 90},
            language: {Width: 130},
            open_issues_count: {Width: 90},
            license: {Width: 120},
            open_pr_count: {Width: 100},
            closed_issues_count: {Width: 100},
            topics: {Width: 500},
          },
        },
      ],
    },

    StyledColumn: {
      StyledColumns: [
        {
          ColumnId: 'name',
          BadgeStyle: {
            Badges: [
              {
                Style: {
                  BackColor: '#D3D3D3',
                  ForeColor: 'Black',
                  BorderRadius: 6,
                },
              },
            ],
          },
        },
        {
          ColumnId: 'license',
          BadgeStyle: {
            Badges: [
              {
                Predicate: {
                  PredicateId: 'Is',
                  Inputs: ['MIT License'],
                },
                Style: {
                  BackColor: 'DarkBlue',
                  ForeColor: 'white',
                  BorderRadius: 6,
                },
              },
              {
                Predicate: {
                  PredicateId: 'Is',
                  Inputs: ['BSD 3-Clause'],
                },
                Style: {
                  BackColor: 'Brown',
                  ForeColor: 'white',
                  BorderRadius: 6,
                },
              },
              {
                Style: {
                  BackColor: 'Purple',
                  ForeColor: 'white',
                  BorderRadius: 6,
                },
                Predicate: {
                  PredicateId: 'Is',
                  Inputs: ['Other'],
                },
              },
            ],
          },
        },
        {
          ColumnId: 'language',
          BadgeStyle: {
            Badges: [
              {
                Predicate: {
                  PredicateId: 'Is',
                  Inputs: ['JavaScript'],
                },
                Icon: {
                  src: 'https://upload.wikimedia.org/wikipedia/commons/9/99/Unofficial_JavaScript_logo_2.svg',
                },
              },
              {
                Predicate: {
                  PredicateId: 'Is',
                  Inputs: ['TypeScript'],
                },
                Icon: {
                  src: 'https://upload.wikimedia.org/wikipedia/commons/4/4c/Typescript_logo_2020.svg',
                },
              },
              {
                Predicate: {
                  PredicateId: 'Is',
                  Inputs: ['HTML'],
                },
                Icon: {
                  src: 'https://upload.wikimedia.org/wikipedia/commons/6/61/HTML5_logo_and_wordmark.svg',
                },
              },
            ],
          },
        },
        {
          ColumnId: 'closed_issues_count',
          BadgeStyle: {
            Badges: [
              {
                Predicate: {
                  PredicateId: 'LessThan',
                  Inputs: [1000],
                },
                Icon: {
                  name: 'alert',
                },
                Style: {
                  BackColor: 'Red',
                  ForeColor: 'white',
                  BorderRadius: 6,
                },
              },
              {
                Predicate: {
                  PredicateId: 'LessThan',
                  Inputs: [10000],
                },
                Icon: {
                  name: 'flag',
                },
                Style: {
                  BackColor: 'Orange',
                  ForeColor: 'white',
                  BorderRadius: 6,
                },
              },
              {
                Style: {
                  BackColor: 'Green',
                  ForeColor: 'white',
                  BorderRadius: 6,
                },
                Icon: {
                  name: 'checked',
                },
              },
            ],
          },
        },
        {
          ColumnId: 'topics',
          BadgeStyle: {
            Badges: [
              {
                Style: {
                  BackColor: 'yellow',
                  ForeColor: 'black',
                },
                Predicate: {
                  PredicateId: 'Is',
                  Inputs: ['javascript'],
                },
              },
              {
                Style: {
                  BackColor: '#2761B9',
                  ForeColor: 'White',
                },
                Predicate: {
                  PredicateId: 'Is',
                  Inputs: ['typescript'],
                },
              },
              {
                Style: {
                  BackColor: 'Gray',
                  ForeColor: 'White',
                },
              },
            ],
          },
        },
      ],
    },
  },
};

Style

The Style in the Badge is of type Adaptable Style meaning that the Back Colour, Fore Colour, Border Radius can all be configured to match precise requirements.

Note

Style is optional, so no Style can be provided, and the Badge only displays an Icon (e.g. Language column above)

Multiple Badges

Users can provide multiple different Badge Styles in the same column if required.

Hint

This allows you to provide a different Badge Style dependent on the Cell Value e.g. a different colour for each "Status"

This is done by associating a Rule to the Badge Style, which only renders if the Rule returns true.

Note

The Rule is a Predicate that is evaluated by AdapTable dynamically

Badge Styles: Multiple Rules

Fork Fork

This example contains a Badge Style on the Country column
Each country's Badge shows a different style based on a bespoke Rule

import {AdaptableOptions} from '@adaptabletools/adaptable';

export const adaptableOptions: AdaptableOptions = {
  primaryKey: 'EmployeeId',
  adaptableId: 'Badge Style Multiple Rules',
  initialState: {
    Dashboard: {
      ModuleButtons: ['StyledColumn', 'SettingsPanel'],
    },
    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'Basic Layout',
      Layouts: [
        {
          Name: 'Basic Layout',
          TableColumns: [
            'Name',
            'Year',
            'Country',
            'CountryCode',
            'Institutions',
            'Email',
            'Rating',
          ],
        },
      ],
    },
    StyledColumn: {
      StyledColumns: [
        {
          ColumnId: 'Country',
          BadgeStyle: {
            Badges: [
              {
                Predicate: {
                  PredicateId: 'Is',
                  Inputs: ['United States'],
                },
                Style: {
                  BackColor: 'Red',
                  ForeColor: 'White',
                  BorderRadius: 6,
                },
              },
              {
                Predicate: {
                  PredicateId: 'Is',
                  Inputs: ['United Kingdom'],
                },
                Style: {
                  BackColor: 'Blue',
                  ForeColor: 'White',
                  BorderRadius: 6,
                },
              },
              {
                Predicate: {
                  PredicateId: 'Is',
                  Inputs: ['Italy'],
                },
                Style: {
                  BackColor: 'Purple',
                  ForeColor: 'White',
                  BorderRadius: 6,
                },
              },
              {
                Predicate: {
                  PredicateId: 'Is',
                  Inputs: ['Germany'],
                },
                Style: {
                  BackColor: 'Brown',
                  ForeColor: 'White',
                  BorderRadius: 6,
                },
              },
              {
                Predicate: {
                  PredicateId: 'Is',
                  Inputs: ['Japan'],
                },
                Style: {
                  BackColor: 'LightBlue',
                  ForeColor: 'Black',
                  BorderRadius: 6,
                },
              },
              {
                Predicate: {
                  PredicateId: 'Is',
                  Inputs: ['Switzerland'],
                },
                Style: {
                  BackColor: 'LightGray',
                  ForeColor: 'Black',
                  BorderRadius: 6,
                },
              },
            ],
          },
        },
      ],
    },
  },
};

Icons

Badges can optionally include an Icon for extra decoration in addition to the Style.

The icon is of type Adaptable Icon used in various places in AdapTable.

It is most commonly an AdapTable-provided System Icon, available in the Icons dropdown in the UI Wizard.

Find Out More

See the full list of AdapTable System Icons

Custom Icons

Alternatively, the Icon in the Badge can be a Custom Icon provided by the developer at design-time.

Custom Icons can be defined "inline" or supplied using the customIcons property in User Interface Options.

Hint

The advantages of using the customIcons property is that Icons can be re-used (e.g. in Buttons)
It also allows run-time users to create Badge Styles that use custom icons as they will appear in the icon dropdown

Badge Styles: Custom Icons

Fork Fork

This example also contains a Badge Style on the Country column
Each country's Badge includes an icon that was provided in customIcons in User Interface Options

import {AdaptableOptions} from '@adaptabletools/adaptable';
import {truncate} from 'fs/promises';

export const adaptableOptions: AdaptableOptions = {
  primaryKey: 'EmployeeId',
  adaptableId: 'Badge Style Custom Icons',
  userInterfaceOptions: {
    customIcons: [
      {
        name: 'UK',
        icon: {
          src: 'https://upload.wikimedia.org/wikipedia/commons/1/13/United-kingdom_flag_icon_round.svg',
        },
      },
      {
        name: 'Italy',
        icon: {
          src: 'https://upload.wikimedia.org/wikipedia/en/0/03/Flag_of_Italy.svg',
        },
      },
      {
        name: 'Germany',
        icon: {
          src: 'https://upload.wikimedia.org/wikipedia/en/thumb/b/ba/Flag_of_Germany.svg/800px-Flag_of_Germany.svg.png',
        },
      },
      {
        name: 'US',
        icon: {
          src: 'https://upload.wikimedia.org/wikipedia/commons/8/88/United-states_flag_icon_round.svg',
        },
      },
      {
        name: 'Switzerland',
        icon: {
          src: 'https://upload.wikimedia.org/wikipedia/commons/thumb/f/f3/Flag_of_Switzerland.svg/512px-Flag_of_Switzerland.svg.png',
        },
      },
      {
        name: 'Japan',
        icon: {
          src: 'https://upload.wikimedia.org/wikipedia/commons/b/bc/Flag_of_Japan%28bordered%29.svg',
        },
      },
    ],
  },
  initialState: {
    Dashboard: {
      ModuleButtons: ['StyledColumn', 'SettingsPanel'],
    },
    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'Basic Layout',
      Layouts: [
        {
          Name: 'Basic Layout',
          TableColumns: [
            'Name',
            'Year',
            'Country',
            'CountryCode',
            'Institutions',
            'Email',
            'Rating',
          ],
          AutoSizeColumns: true,
        },
      ],
    },
    StyledColumn: {
      StyledColumns: [
        {
          ColumnId: 'Country',
          BadgeStyle: {
            Badges: [
              {
                Predicate: {
                  PredicateId: 'Is',
                  Inputs: ['United States'],
                },
                Style: {
                  BackColor: 'LightGray',
                  ForeColor: 'Black',
                  BorderRadius: 6,
                },
                Icon: {
                  name: 'US',
                },
              },
              {
                Predicate: {
                  PredicateId: 'Is',
                  Inputs: ['United Kingdom'],
                },
                Style: {
                  BackColor: 'LightGray',
                  ForeColor: 'Black',
                  BorderRadius: 6,
                },
                Icon: {
                  name: 'UK',
                },
              },
              {
                Predicate: {
                  PredicateId: 'Is',
                  Inputs: ['Italy'],
                },
                Style: {
                  BackColor: 'LightGray',
                  ForeColor: 'Black',
                  BorderRadius: 6,
                },
                Icon: {
                  name: 'Italy',
                },
              },
              {
                Predicate: {
                  PredicateId: 'Is',
                  Inputs: ['Germany'],
                },
                Style: {
                  BackColor: 'LightGray',
                  ForeColor: 'Black',
                  BorderRadius: 6,
                },
                Icon: {
                  name: 'Germany',
                },
              },

              {
                Predicate: {
                  PredicateId: 'Is',
                  Inputs: ['Japan'],
                },
                Style: {
                  BackColor: 'LightGray',
                  ForeColor: 'Black',
                  BorderRadius: 6,
                },
                Icon: {
                  name: 'Japan',
                },
              },
              {
                Predicate: {
                  PredicateId: 'Is',
                  Inputs: ['Switzerland'],
                },
                Style: {
                  BackColor: 'LightGray',
                  ForeColor: 'Black',
                  BorderRadius: 6,
                },
                Icon: {
                  name: 'Switzerland',
                },
              },
            ],
          },
        },
      ],
    },
  },
};

Icon Only Badges

It is possible to render a Badge where only the Icon is visible (without any cell text displayed).

This is done by creating setting the IconOnly property of the Badge to true.

Hint

The optional Style property can be leveraged to create Icon-only Badge Columns (similar to AG Grid Cell Renderers)

Badge Styles: Only Icons

Fork Fork

This example contains 2 Badge Styles that display the Icon only (and no cell text):
- Code - uses the same set of Custom Icons that we provide in the demo above (and has no style for the Badge applied)
- Rating - uses an AdapTable Icon and does have a style (of gray back colour)

import {AdaptableOptions} from '@adaptabletools/adaptable';

export const adaptableOptions: AdaptableOptions = {
  primaryKey: 'EmployeeId',
  adaptableId: 'Badge Style Only Icons',
  userInterfaceOptions: {
    customIcons: [
      {
        name: 'UK',
        icon: {
          src: 'https://upload.wikimedia.org/wikipedia/commons/1/13/United-kingdom_flag_icon_round.svg',
        },
      },
      {
        name: 'Italy',
        icon: {
          src: 'https://upload.wikimedia.org/wikipedia/en/0/03/Flag_of_Italy.svg',
        },
      },
      {
        name: 'Germany',
        icon: {
          src: 'https://upload.wikimedia.org/wikipedia/en/thumb/b/ba/Flag_of_Germany.svg/800px-Flag_of_Germany.svg.png',
        },
      },
      {
        name: 'US',
        icon: {
          src: 'https://upload.wikimedia.org/wikipedia/commons/8/88/United-states_flag_icon_round.svg',
        },
      },
      {
        name: 'Switzerland',
        icon: {
          src: 'https://upload.wikimedia.org/wikipedia/commons/thumb/f/f3/Flag_of_Switzerland.svg/512px-Flag_of_Switzerland.svg.png',
        },
      },
      {
        name: 'Japan',
        icon: {
          src: 'https://upload.wikimedia.org/wikipedia/commons/b/bc/Flag_of_Japan%28bordered%29.svg',
        },
      },
    ],
  },
  initialState: {
    Dashboard: {
      ModuleButtons: ['StyledColumn', 'SettingsPanel'],
    },
    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'Basic Layout',
      Layouts: [
        {
          Name: 'Basic Layout',
          TableColumns: [
            'Name',
            'Year',
            'CountryCode',
            'Institutions',
            'Country',
            'Rating',
            'Email',
          ],
          AutoSizeColumns: true,
        },
      ],
    },
    StyledColumn: {
      StyledColumns: [
        {
          ColumnId: 'CountryCode',
          BadgeStyle: {
            Badges: [
              {
                Predicate: {
                  PredicateId: 'Is',
                  Inputs: ['USA'],
                },
                Icon: {
                  name: 'US',
                },
                IconOnly: true,
              },
              {
                Predicate: {
                  PredicateId: 'Is',
                  Inputs: ['GBR'],
                },
                Icon: {
                  name: 'UK',
                },
                IconOnly: true,
              },
              {
                Predicate: {
                  PredicateId: 'Is',
                  Inputs: ['ITA'],
                },
                Icon: {
                  name: 'Italy',
                },
                IconOnly: true,
              },
              {
                Predicate: {
                  PredicateId: 'Is',
                  Inputs: ['DEU'],
                },
                Icon: {
                  name: 'Germany',
                },
                IconOnly: true,
              },

              {
                Predicate: {
                  PredicateId: 'Is',
                  Inputs: ['JPN'],
                },
                Icon: {
                  name: 'Japan',
                },
                IconOnly: true,
              },
              {
                Predicate: {
                  PredicateId: 'Is',
                  Inputs: ['CHE'],
                },
                Icon: {
                  name: 'Switzerland',
                },
                IconOnly: true,
              },
            ],
          },
        },
        {
          ColumnId: 'Rating',
          BadgeStyle: {
            Badges: [
              {
                Predicate: {
                  PredicateId: 'GreaterThan',
                  Inputs: [90],
                },
                Style: {
                  BackColor: 'LightGray',
                  ForeColor: 'Black',
                  BorderRadius: 6,
                },
                Icon: {
                  name: 'check',
                },
                IconOnly: true,
              },
              {
                Predicate: {
                  PredicateId: 'Between',
                  Inputs: [75, 89],
                },
                Style: {
                  BackColor: 'LightGray',
                  ForeColor: 'Black',
                  BorderRadius: 6,
                },
                Icon: {
                  name: 'dock',
                },
                IconOnly: true,
              },
              {
                Predicate: {
                  PredicateId: 'LessThan',
                  Inputs: [75],
                },
                Icon: {
                  name: 'close',
                },
                IconOnly: true,
                Style: {
                  BackColor: 'LightGray',
                  ForeColor: 'Black',
                  BorderRadius: 6,
                },
              },
            ],
          },
        },
      ],
    },
  },
};

Arrays

Badges can be applied to multiple items in the same cell.

Caution

The Column definiition needs to have a Cell Data Type of textArray or numberArray

By default AdapTable will apply the same Badge style to every item in the Array.

However users can create multiple Badges for an Array column, with each having its own Rule and Style.

Note

There is no limit for the number of Badges which an array-based Column can contain

Badge Styles: Arrays

Fork Fork

This example applies a Badge Style to 2 array-based Columns:
- Institutions column (string) - we created 7 Badges each with a Rule (per institution), and a (Green) Badge for institutions which do not meet any Predicate
- Awards column (numeric) - a single Badge Style for all values (and no Rules)

import {AdaptableOptions} from '@adaptabletools/adaptable';

export const adaptableOptions: AdaptableOptions = {
  primaryKey: 'EmployeeId',
  adaptableId: 'Badge Style Arrays',
  initialState: {
    Dashboard: {
      ModuleButtons: ['StyledColumn', 'SettingsPanel'],
    },
    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'Basic Layout',
      Layouts: [
        {
          Name: 'Basic Layout',
          TableColumns: [
            'Name',
            'Year',
            'Country',
            'CountryCode',
            'Institutions',
            'Email',
            'Awards',
          ],
          ColumnSizing: {
            Name: {Width: 130},
            Year: {Width: 80},
            Country: {Width: 150},
            CountryCode: {Width: 120},
            Institutions: {Width: 300},
            Email: {Width: 150},
            Awards: {Width: 300},
          },
        },
      ],
    },
    StyledColumn: {
      StyledColumns: [
        {
          ColumnId: 'Institutions',
          BadgeStyle: {
            Badges: [
              {
                Style: {
                  BackColor: 'LightGreen',
                  ForeColor: 'Black',
                  BorderRadius: 6,
                },
                Predicate: {
                  PredicateId: 'Is',
                  Inputs: ['Columbia'],
                },
              },
              {
                Style: {
                  BackColor: 'Purple',
                  ForeColor: 'White',
                  BorderRadius: 6,
                },
                Predicate: {
                  PredicateId: 'Is',
                  Inputs: ['Princeton'],
                },
              },
              {
                Style: {
                  BackColor: 'Brown',
                  ForeColor: 'White',
                  BorderRadius: 6,
                },
                Predicate: {
                  PredicateId: 'Is',
                  Inputs: ['Max Planck'],
                },
              },
              {
                Style: {
                  BackColor: 'Orange',
                  ForeColor: 'Black',
                  BorderRadius: 6,
                },
                Predicate: {
                  PredicateId: 'Is',
                  Inputs: ['Geneva'],
                },
              },
              {
                Style: {
                  BackColor: 'LightBlue',
                  ForeColor: 'Black',
                  BorderRadius: 6,
                },
                Predicate: {
                  PredicateId: 'Is',
                  Inputs: ['University of Cambridge'],
                },
              },
              {
                Style: {
                  BackColor: 'DarkBlue',
                  ForeColor: 'White',
                  BorderRadius: 6,
                },
                Predicate: {
                  PredicateId: 'Is',
                  Inputs: ['Oxford University'],
                },
              },
              {
                Style: {
                  BackColor: 'Pink',
                  ForeColor: 'Black',
                  BorderRadius: 6,
                },
                Predicate: {
                  PredicateId: 'Is',
                  Inputs: ['Hamburg'],
                },
              },
              {
                Style: {
                  BackColor: 'DarkGreen',
                  ForeColor: 'White',
                  BorderRadius: 6,
                },
              },
            ],
          },
        },
        {
          ColumnId: 'Awards',
          BadgeStyle: {
            Badges: [
              {
                Style: {
                  BackColor: 'LightGray',
                  ForeColor: 'Black',
                  BorderRadius: 6,
                },
              },
            ],
          },
        },
      ],
    },
  },
};

Custom Predicates

The Badge Style can use a Custom Predicate if required.

Hint

This is very useful if there are many different cell values and a lookup function is required
It is also useful in Array Columns where you wish to group similar values together

Badge Styles: Custom Predicates

Fork Fork

This example applies a Badge to the Institutions column (similar to the demo above)
However we also create 4 Custom Predicates for UK, US, European and Asian institutions
We have created 4 Badges - one for each Custom Predicate - which displays an appropriate flag

import {
  AdaptableOptions,
  PredicateDefHandlerContext,
} from '@adaptabletools/adaptable';

export const adaptableOptions: AdaptableOptions = {
  primaryKey: 'EmployeeId',
  adaptableId: 'Badge Style Custom Predicates',
  predicateOptions: {
    customPredicateDefs: [
      {
        id: 'us_institution',
        label: 'American Universities',
        columnScope: {DataTypes: ['textArray']},
        moduleScope: ['columnFilter', 'badgeStyle'],
        handler(context: PredicateDefHandlerContext) {
          return (
            context.value === 'Columbia' ||
            context.value === 'Princeton' ||
            context.value === 'Syracuse'
          );
        },
        toString: () => `US Universities`,
      },
      {
        id: 'us_institution',
        label: 'American Universities',
        columnScope: {DataTypes: ['textArray']},
        moduleScope: ['columnFilter', 'badgeStyle'],
        handler(context: PredicateDefHandlerContext) {
          return (
            context.value === 'Columbia' ||
            context.value === 'Princeton' ||
            context.value === 'Syracuse'
          );
        },
        toString: () => `US Universities`,
      },
      {
        id: 'uk_institution',
        label: 'British Universities',
        columnScope: {DataTypes: ['textArray']},
        moduleScope: ['columnFilter', 'badgeStyle'],
        handler(context: PredicateDefHandlerContext) {
          return (
            context.value === 'University of Cambridge' ||
            context.value === 'Oxford University'
          );
        },
        toString: () => `UK Universities`,
      },
      {
        id: 'euro_institution',
        label: 'European Universities',
        columnScope: {DataTypes: ['textArray']},
        moduleScope: ['columnFilter', 'badgeStyle'],
        handler(context: PredicateDefHandlerContext) {
          return (
            context.value === 'Hamburg' ||
            context.value === 'Max Planck' ||
            context.value === 'Geneva' ||
            context.value === 'Sapienza'
          );
        },
        toString: () => `Euro Universities`,
      },
      {
        id: 'asian_institution',
        label: 'Asian Universities',
        columnScope: {DataTypes: ['textArray']},
        moduleScope: ['columnFilter', 'badgeStyle'],
        handler(context: PredicateDefHandlerContext) {
          return context.value === 'Nagoya';
        },
        toString: () => `UK Universities`,
      },
    ],
  },
  userInterfaceOptions: {
    customIcons: [
      {
        name: 'UK',
        icon: {
          src: 'https://upload.wikimedia.org/wikipedia/commons/1/13/United-kingdom_flag_icon_round.svg',
        },
      },
      {
        name: 'US',
        icon: {
          src: 'https://upload.wikimedia.org/wikipedia/commons/8/88/United-states_flag_icon_round.svg',
        },
      },
      {
        name: 'EUR',
        icon: {
          src: 'https://upload.wikimedia.org/wikipedia/commons/b/b7/Flag_of_Europe.svg',
        },
      },
      {
        name: 'Japan',
        icon: {
          src: 'https://upload.wikimedia.org/wikipedia/commons/b/bc/Flag_of_Japan%28bordered%29.svg',
        },
      },
    ],
  },
  initialState: {
    Dashboard: {
      ModuleButtons: ['StyledColumn', 'SettingsPanel'],
    },
    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'Basic Layout',
      Layouts: [
        {
          Name: 'Basic Layout',
          TableColumns: [
            'Name',
            'Year',
            'Country',
            'CountryCode',
            'Institutions',
            'Email',
            'Rating',
          ],
          ColumnSizing: {
            Name: {Width: 130},
            Year: {Width: 80},
            Country: {Width: 150},
            CountryCode: {Width: 120},
            Institutions: {Width: 300},
            Email: {Width: 150},
            Rating: {Width: 100},
          },
        },
      ],
    },
    StyledColumn: {
      StyledColumns: [
        {
          ColumnId: 'Institutions',
          BadgeStyle: {
            Badges: [
              {
                Style: {
                  BackColor: 'LightGreen',
                  ForeColor: 'Black',
                  BorderRadius: 6,
                },
                Predicate: {
                  PredicateId: 'us_institution',
                },
                Icon: {
                  name: 'US',
                },
              },
              {
                Style: {
                  BackColor: 'LightBlue',
                  ForeColor: 'Black',
                  BorderRadius: 6,
                },
                Predicate: {
                  PredicateId: 'uk_institution',
                },
                Icon: {
                  name: 'UK',
                },
              },
              {
                Style: {
                  BackColor: 'SandyBrown',
                  ForeColor: 'Black',
                  BorderRadius: 6,
                },
                Predicate: {
                  PredicateId: 'euro_institution',
                },
                Icon: {
                  name: 'EUR',
                },
              },
              {
                Style: {
                  BackColor: 'Plum',
                  ForeColor: 'Black',
                  BorderRadius: 6,
                },
                Predicate: {
                  PredicateId: 'asian_institution',
                },
                Icon: {
                  name: 'Japan',
                },
              },
            ],
          },
        },
      ],
    },
  },
};

Defining Badge Styles

Badge Styles are provided at design-time through Styled Column Initial Adaptable State.

Developer Guide

Defining Badge Styles in Initial Adaptable State

This example shows how to define a Badge Style in Initial Adaptable State with 3 Badges (to match 3 Rules)

const initialState: InitialState = {
  StyledColumn: {
    StyledColumns: [
      {
        ColumnId: 'closed_issues_count',
        BadgeStyle: {
          Badges: [
            {
              Predicate: {
                PredicateId: 'LessThan',
                Inputs: [1000],
              },
              Icon: {
                name: 'alert',
              },
              Style: {
                BackColor: 'Red',
                ForeColor: 'white',
                BorderRadius: 6,
              },
            },
            {
              Predicate: {
                PredicateId: 'LessThan',
                Inputs: [10000],
              },
              Icon: {
                name: 'flag',
              },
              Style: {
                BackColor: 'Orange',
                ForeColor: 'white',
                BorderRadius: 6,
              },
            },
            {
              Icon: {
                name: 'checked',
              },
              Style: {
                BackColor: 'Green',
                ForeColor: 'white',
                BorderRadius: 6,
              },
            },
          ],
        },
      },
    ],
  },
};

Provide ColumnId

Supply the ColumnId of Styled Column showing the Badge

Add the Badge Style

Add a BadgeStyle property to the object

Provide an Array of Badges

The Badges array will contain each distinctly styled Badge in the Column.

Each Badge will have its own Rule (see below)

Provide a Rule

Provide a Rule for the Badge using a Predicate, supplying: PredicateId - which Predicate to use Inputs - any arguments the Predicate requires for evaluation

Note

If there is only one Badge in the array, no Rule is required

Supply an Icon (optional)

Display an Icon (of type Adaptable Icon) in the Badge. It can be either:

Internal - provided by AdapTable
External - user supplied

Supply a Style

Style the Badge using the Adaptable Style object, providing any of:

Back Colour
Font Colour
Border Colour / Radius
Font Properties

Caution

AdapTable will not provide a default Border Radius value
Make sure to supply it yourself for a rounded effect

Videos

Badge Style

(Recorded with AdapTable v17.0)

Image-only Columns

(Recorded with AdapTable v21.2)

Custom Icons in Badges

(Recorded with AdapTable v19.0)

FAQ

Can we create multiple Badge Styles? Yes, you can have as many per column as required; each should have its own, non-overlapping, Predicate-based Rule

Can we have multiple Badge Styles in the same Column, each with a different Rule? It is possible to have multiple Badges in the same Column - if it is of cell type textArray. However currently each Badge is the same Style. We plan to introduce the ability to have different Badges in the same Column (using different Rules) in a future version.

Do you support Badges on Date Columns? Not currently, but we might add this in a future version if there is demand

PreviousPercent Bar Style NextSparkline Column Style

Framework: