AdapTable Version:

Framework:

Adaptable Icon

Summary

The Adaptable Icon object enables the provision of customizable icons
Icons are very widely used in Adaptable including in Buttons, Menus, and Badge Style
An AdapTable Icon can be one of 3 types:
- a System icon provided by AdapTable
- a Custom icon provided by a developer
- an HTML element provided by a developer

The Adaptable Icon is used in many places in AdapTable including:

In Adaptable Buttons
As the Application Icon (which appears in the Dashboard and Toast Notifications)
In Column Menu and Context Menu items
In Badge Style Columns

AdapTable Icons can be styled as needed.

Types of Adaptable Icon

An Adaptable Icon definition (of type AdaptableIcon) can be one of 3 types:

System Icon - shipped with AdapTable
Custom Icon - defined and provided by the user
HTML Element Icon - specified by the user

System Icon

AdapTable provides a number of SVG icons that can be used in various use cases.

This is done by simply referencing the name of the icon.

Note

The full list of available AdapTable Icons - with their names - is provided in the Appendix to this page

Optionally the size of the icon may be specified.

Deep Dive

The System Icon Definition

The System Icon object defined as follows:

Property	Description
name	The name of the icon to use (referencing the AdapTable Icon Library)
size	The size (in pixels) of the SVG icon (defaults to `17px`)

It derives from Base Icon which includes these properties:

Property	Description
className	The class name of the icon
style	CSS Properties

System Adaptable Icons

Fork Fork

This demo leverages a number of different System Icons which are used in various ways:
- an Application Icon (see below for more details) that uses the home System Icon
- 2 Custom Predicates (Popular & Vanilla on the Name & Language columns) using the broadcast and check-circle System Icons
- 3 Custom Toolbar Buttons which show the 2 Custom Predicates described above (and the same System Icons) plus a Clear button (that uses close System Icon)
- a Dashboard Button to switch Themes that uses the theme system icon
- a Badge Style on the Language column that uses the assignment System Icon
- a User Context Menu Item (Expand / Collapse Dashboard) that uses expand and collapse System Icons
- a User Column Menu Item to set System Status that uses traffic-lights,error, warning, checked and info System Icons

import {
  AdaptableButton,
  AdaptableOptions,
  ColumnMenuContext,
  CustomColumnMenuContext,
  CustomContextMenuContext,
  CustomToolbarButtonContext,
  DashboardButtonContext,
  PredicateDefHandlerContext,
  UserColumnMenuItem,
  UserContextMenuItem,
} from '@adaptabletools/adaptable';

import {WebFramework} from './rowData';

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Adaptable System Icons',
  predicateOptions: {
    customPredicateDefs: [
      {
        id: 'popular',
        label: 'Popular',
        columnScope: {
          ColumnIds: ['name'],
        },
        moduleScope: ['columnFilter'],
        handler(params: PredicateDefHandlerContext) {
          const githubStarsCount: number = params.node.data.github_stars;
          const watchersCount: number = params.node.data.github_watchers;
          return githubStarsCount > 50000 && watchersCount > 500 ? true : false;
        },
        icon: {
          name: 'broadcast',
        },
      },
      {
        id: 'vanilla',
        label: 'Vanilla',
        columnScope: {
          ColumnIds: ['language'],
        },
        moduleScope: ['columnFilter'],
        handler(params: PredicateDefHandlerContext) {
          return params.value == 'JavaScript' || params.value == 'HTML';
        },
        icon: {
          name: 'check-circle',
        },
      },
    ],
  },
  contextMenuOptions: {
    customContextMenu: (context: CustomContextMenuContext) => {
      const {
        defaultAgGridMenuStructure,
        defaultAdaptableMenuStructure,
        adaptableApi,
      } = context;

      const customDashboardMenuItem: UserContextMenuItem = {
        menuType: 'User',
        label: adaptableApi.dashboardApi.isDashboardCollapsed()
          ? 'Expand Dashboard'
          : 'Collapse Dashboard',
        onClick: () =>
          adaptableApi.dashboardApi.isDashboardCollapsed()
            ? adaptableApi.dashboardApi.expandDashboard()
            : adaptableApi.dashboardApi.collapseDashboard(),
        icon: {
          name: adaptableApi.dashboardApi.isDashboardCollapsed()
            ? 'expand'
            : 'collapse',
        },
      };

      return [
        customDashboardMenuItem,
        '-',
        ...defaultAgGridMenuStructure,
        '-',
        ...defaultAdaptableMenuStructure,
      ];
    },
  },
  columnMenuOptions: {
    customColumnMenu: (context: CustomColumnMenuContext) => {
      const {
        defaultAgGridMenuStructure,
        defaultAdaptableMenuStructure,
        isRowGroupColumn,
        adaptableApi,
      } = context;

      if (isRowGroupColumn) {
        return [
          ...defaultAgGridMenuStructure,
          '-',
          ...defaultAdaptableMenuStructure,
        ];
      }

      const setSystemStatusMenuItem: UserColumnMenuItem = {
        menuType: 'User',
        label: 'Set System Status',
        icon: {
          name: 'traffic-lights',
        },
        subMenuItems: [
          {
            menuType: 'User',
            label: 'Set Error',

            onClick: (menuContext: ColumnMenuContext) => {
              menuContext.adaptableApi.systemStatusApi.setErrorSystemStatus(
                'System Down'
              );
            },
            icon: {
              name: 'error',
            },
          },
          {
            menuType: 'User',
            label: 'Set Warning',
            icon: {
              name: 'warning',
            },
            onClick: (menuContext: ColumnMenuContext) => {
              menuContext.adaptableApi.systemStatusApi.setWarningSystemStatus(
                'System Slow'
              );
            },
          },
          {
            menuType: 'User',
            label: 'Set Success',
            icon: {
              name: 'checked',
            },
            onClick: (menuContext: ColumnMenuContext) => {
              menuContext.adaptableApi.systemStatusApi.setSuccessSystemStatus(
                'System Fine'
              );
            },
          },
          {
            menuType: 'User',
            label: 'Set Info',
            icon: {
              name: 'info',
            },
            onClick: (menuContext: ColumnMenuContext) => {
              menuContext.adaptableApi.systemStatusApi.setInfoSystemStatus(
                'Demos working fine'
              );
            },
          },
        ],
      };

      return [
        setSystemStatusMenuItem,
        '-',
        ...defaultAgGridMenuStructure,
        '-',
        ...defaultAdaptableMenuStructure,
      ];
    },
  },
  dashboardOptions: {
    customToolbars: [
      {
        name: 'CustomToolbarButtons',
        title: 'Custom Filters',
        toolbarButtons: [
          {
            label: 'Popular',
            buttonStyle: {
              tone: 'neutral',
              variant: 'outlined',
            },
            icon: {
              name: 'broadcast',
              size: 100,
              //   style: {margin: 500},
            },
            onClick: (
              _button: AdaptableButton<CustomToolbarButtonContext>,
              context: CustomToolbarButtonContext
            ) => {
              context.adaptableApi.filterApi.columnFilterApi.setColumnFilterForColumn(
                'name',
                {
                  PredicateId: 'popular',
                }
              );
            },
          },
          {
            label: 'Vanilla',
            buttonStyle: {
              tone: 'neutral',
              variant: 'outlined',
            },
            icon: {
              name: 'check-circle',
            },
            onClick: (
              _button: AdaptableButton<CustomToolbarButtonContext>,
              context: CustomToolbarButtonContext
            ) => {
              context.adaptableApi.filterApi.columnFilterApi.setColumnFilterForColumn(
                'language',
                {
                  PredicateId: 'vanilla',
                }
              );
            },
          },
          {
            label: 'Clear',
            buttonStyle: {
              tone: 'neutral',
              variant: 'outlined',
            },
            icon: {
              name: 'close',
            },
            onClick: (
              _button: AdaptableButton<CustomToolbarButtonContext>,
              context: CustomToolbarButtonContext
            ) => {
              context.adaptableApi.filterApi.columnFilterApi.clearColumnFilters();
            },
          },
        ],
      },
    ],
    customDashboardButtons: [
      {
        label: 'Switch Theme',
        buttonStyle: {
          tone: 'neutral',
          variant: 'raised',
        },
        icon: {
          name: 'theme',
          size: 50,
        },
        onClick: (
          _button: AdaptableButton<DashboardButtonContext>,
          context: DashboardButtonContext
        ) => {
          const currentTheme = context.adaptableApi.themeApi.getCurrentTheme();
          if (currentTheme == 'light') {
            context.adaptableApi.themeApi.loadDarkTheme();
          } else {
            context.adaptableApi.themeApi.loadLightTheme();
          }
        },
      },
    ],
  },
  userInterfaceOptions: {
    applicationIcon: {
      name: 'home',
      size: 25,
    },
  },
  initialState: {
    Dashboard: {
      Tabs: [
        {
          Name: 'Default',
          Toolbars: ['CustomToolbarButtons', 'SystemStatus'],
        },
      ],
    },
    Theme: {CurrentTheme: 'dark'},
    StyledColumn: {
      StyledColumns: [
        {
          ColumnId: 'language',
          BadgeStyle: {
            Badges: [
              {
                Style: {
                  BackColor: 'Gray',
                  ForeColor: 'White',
                  BorderRadius: 6,
                },
                Icon: {
                  name: 'assignment',
                },
              },
            ],
          },
        },
      ],
    },
    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          TableColumns: [
            'name',
            'language',
            'github_stars',
            'license',
            'has_projects',
            'has_pages',
            'created_at',
            'has_wiki',
            'updated_at',
            'pushed_at',
            'github_watchers',
            'week_issue_change',
          ],
          Name: 'Standard Layout',
          AutoSizeColumns: true,
        },
      ],
    },
  },
};

Custom Icon

Where the System Icons are insufficient, Custom Icons may be provided by developers.

Technically, the icon will be rendered as an <img> element with the provided src attribute.

The src attribute of the <img> element may be a relative, or absolute, path to any supported image format.

Alternatively, the image can be an SVG format if required.

Custom Icons can be configured in 2 ways:

"in-place", directly provided when needed (e.g. when defining a Button)
via the customIcons property in User Interface Options and then referenced by name when needed

Hint

An advantage of providing a customIcons collection is that you can easily re-use the same Icon in multiple places
Another advantage is that run-time users can select these Icons in the UI (e.g. when creating a Badge Style)

customIcons

CustomIcon[]

Bespoke Icons that can be used in AdapTable (e.g. in Badge Styles and Buttons)

CustomIcon[]

Custom Icons can be provided to supplement the many system icons shipped by AdapTable.

These can then be used wherever icons are used e.g. in AdapTable Buttons or Badge Styles.

This property can be provided in 2 ways:

as a hard-coded list
as a function (useful if you are retrieving the icons from a server)

The Custom Icon object is defined as follows:

Property	Description
src	The URL of the icon to use

It derives from Base Icon which includes these properties:

Property	Description
className	The class name of the icon
style	CSS Properties

adaptableOptions.userInterfaceOptions = {
  customIcons: [
    {
      name: 'UK',
      icon: {
        src: 'https://upload.wikimedia.org/wikipedia/commons/1/13/United-kingdom_flag_icon_round.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',
      },
    },
 ],
},

Custom Adaptable Icons

Fork Fork

This demo defines 4 Custom Icons - JavaScript, TypeScript, HTML and Popular - in User Interface Options, which we use in multiple places:
- as a Badge Style on the Language and Name columns
- as Custom Predicates - available in Language and Name columns
- in a User Context Menu Item and User Column Menu Item (for the Name Column only) which use the Popular icon
- as Dashboard Buttons and Custom Toolbar Buttons

import {
  AdaptableButton,
  AdaptableOptions,
  ColumnMenuContext,
  CustomColumnMenuContext,
  CustomContextMenuContext,
  CustomToolbarButtonContext,
  DashboardButtonContext,
  PredicateDefHandlerContext,
  UserColumnMenuItem,
  UserContextMenuItem,
} from '@adaptabletools/adaptable';

const popularIconBase64 =
  'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHdpZHRoPSIyNCIgZmlsbD0iY3VycmVudENvbG9yIj48cGF0aCBkPSJNOC41IDkgNy40IDYuNiA1IDUuNSA3LjQgNC40IDguNSAyIDkuNiA0LjQgMTIgNS41IDkuNiA2LjZaTTE1IDEyIDE0LjA1IDkuOTUgMTIgOSAxNC4wNSA4LjA1IDE1IDYgMTUuOTUgOC4wNSAxOCA5IDE1Ljk1IDkuOTVaTTQgMTQgMy4wNSAxMS45NSAxIDExIDMuMDUgMTAuMDUgNCA4IDQuOTUgMTAuMDUgNyAxMSA0Ljk1IDExLjk1Wk00LjUgMjAuNSAzIDE5IDEwLjUgMTEuNSAxNC41IDE1LjUgMjEuNiA3LjUyNSAyMyA4LjkyNSAxNC41IDE4LjUgMTAuNSAxNC41WiIvPjwvc3ZnPg==';
import {WebFramework} from './rowData';

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Adaptable Custom Icons',
  predicateOptions: {
    customPredicateDefs: [
      {
        id: 'javascript',
        label: 'JavaScript',
        columnScope: {
          ColumnIds: ['language'],
        },
        moduleScope: ['columnFilter'],
        handler(params: PredicateDefHandlerContext) {
          return params.node.data.language == 'JavaScript';
        },
        icon: {
          //  src: popularIconBase64,
          name: 'javascript',
        },
      },
      {
        id: 'typescript',
        label: 'TypeScript',
        columnScope: {
          ColumnIds: ['language'],
        },
        moduleScope: ['columnFilter'],
        handler(params: PredicateDefHandlerContext) {
          return params.node.data.language == 'TypeScript';
        },
        icon: {
          //  src: popularIconBase64,
          name: 'typescript',
        },
      },
      {
        id: 'html',
        label: 'HTML',
        columnScope: {
          ColumnIds: ['language'],
        },
        moduleScope: ['columnFilter'],
        handler(params: PredicateDefHandlerContext) {
          return params.node.data.language == 'HTML';
        },
        icon: {
          //  src: popularIconBase64,
          name: 'html',
        },
      },
      {
        id: 'popular',
        label: 'Popular',
        columnScope: {
          ColumnIds: ['name'],
        },
        moduleScope: ['columnFilter'],
        handler(params: PredicateDefHandlerContext) {
          return ['react', 'angular', 'vue', 'stencil', 'solid'].includes(
            params.value
          );
        },
        icon: {
          name: 'popular',
        },
      },
    ],
  },
  contextMenuOptions: {
    customContextMenu: (context: CustomContextMenuContext) => {
      const {
        defaultAgGridMenuStructure,
        defaultAdaptableMenuStructure,
        adaptableApi,
      } = context;

      const customFilterNameMenuItem: UserContextMenuItem = {
        menuType: 'User',
        label: 'Show Popular',
        onClick: () =>
          context.adaptableApi.filterApi.columnFilterApi.setColumnFilterForColumn(
            'name',
            {
              PredicateId: 'popular',
            }
          ),
        hidden: context.adaptableColumn.columnId !== 'name',
        icon: {
          name: 'popular',
        },
      };

      return [
        customFilterNameMenuItem,
        '-',
        ...defaultAgGridMenuStructure,
        '-',
        ...defaultAdaptableMenuStructure,
      ];
    },
  },
  columnMenuOptions: {
    customColumnMenu: (context: CustomColumnMenuContext) => {
      const {
        defaultAgGridMenuStructure,
        defaultAdaptableMenuStructure,
        isRowGroupColumn,
        adaptableApi,
      } = context;

      if (isRowGroupColumn) {
        return [
          ...defaultAgGridMenuStructure,
          '-',
          ...defaultAdaptableMenuStructure,
        ];
      }

      const customFilterNameMenuItem: UserColumnMenuItem = {
        menuType: 'User',
        label: 'Show Popular',
        onClick: () =>
          context.adaptableApi.filterApi.columnFilterApi.setColumnFilterForColumn(
            'name',
            {
              PredicateId: 'popular',
            }
          ),
        hidden: context.adaptableColumn.columnId !== 'name',
        icon: {
          name: 'popular',
        },
      };

      return [
        customFilterNameMenuItem,
        '-',
        ...defaultAgGridMenuStructure,
        '-',
        ...defaultAdaptableMenuStructure,
      ];
    },
  },
  dashboardOptions: {
    customToolbars: [
      {
        name: 'CustomToolbarButtons',
        title: 'Custom Filters',
        toolbarButtons: [
          {
            label: 'Popular',
            buttonStyle: {
              tone: 'neutral',
              variant: 'outlined',
            },
            icon: {
              name: 'popular', // works in toolbar buttons but not dashboard buttons
              style: {margin: 50, padding: 50}, // is ignored
              //   src: 'https://upload.wikimedia.org/wikipedia/commons/9/99/Unofficial_JavaScript_logo_2.svg',
            },
            onClick: (
              _button: AdaptableButton<CustomToolbarButtonContext>,
              context: CustomToolbarButtonContext
            ) => {
              context.adaptableApi.filterApi.columnFilterApi.setColumnFilterForColumn(
                'name',
                {
                  PredicateId: 'popular',
                }
              );
            },
          },
          {
            label: 'JavaScript',
            buttonStyle: {
              tone: 'neutral',
              variant: 'outlined',
            },
            icon: {
              name: 'javascript', // works in toolbar buttons but not dashboard buttons
              style: {marginRight: 50}, // is ignored
              //   src: 'https://upload.wikimedia.org/wikipedia/commons/9/99/Unofficial_JavaScript_logo_2.svg',
            },
            onClick: (
              _button: AdaptableButton<CustomToolbarButtonContext>,
              context: CustomToolbarButtonContext
            ) => {
              context.adaptableApi.filterApi.columnFilterApi.setColumnFilterForColumn(
                'language',
                {
                  PredicateId: 'javascript',
                }
              );
            },
          },
          {
            label: 'TypeScript',
            buttonStyle: {
              tone: 'neutral',
              variant: 'outlined',
            },
            icon: {
              name: 'typescript',
            },
            onClick: (
              _button: AdaptableButton<CustomToolbarButtonContext>,
              context: CustomToolbarButtonContext
            ) => {
              context.adaptableApi.filterApi.columnFilterApi.setColumnFilterForColumn(
                'language',
                {
                  PredicateId: 'typescript',
                }
              );
            },
          },
          {
            label: 'HTML',
            buttonStyle: {
              tone: 'neutral',
              variant: 'outlined',
            },
            icon: {
              name: 'html',
            },
            onClick: (
              _button: AdaptableButton<CustomToolbarButtonContext>,
              context: CustomToolbarButtonContext
            ) => {
              context.adaptableApi.filterApi.columnFilterApi.setColumnFilterForColumn(
                'language',
                {
                  PredicateId: 'html',
                }
              );
            },
          },
          {
            label: 'Clear',
            buttonStyle: {
              tone: 'neutral',
              variant: 'outlined',
            },
            icon: {
              name: 'close',
            },
            onClick: (
              _button: AdaptableButton<CustomToolbarButtonContext>,
              context: CustomToolbarButtonContext
            ) => {
              context.adaptableApi.filterApi.columnFilterApi.clearColumnFilters();
            },
          },
        ],
      },
    ],
    customDashboardButtons: [
      {
        buttonStyle: {
          tone: 'neutral',
          variant: 'outlined',
        },
        icon: {
          // name: 'popular', // should work but doesnt
          src: popularIconBase64,
        },
        onClick: (
          _button: AdaptableButton<DashboardButtonContext>,
          context: DashboardButtonContext
        ) => {
          context.adaptableApi.filterApi.columnFilterApi.setColumnFilterForColumn(
            'name',
            {
              PredicateId: 'popular',
            }
          );
        },
      },
      {
        // label: 'JS',
        buttonStyle: {
          tone: 'neutral',
          variant: 'outlined',
        },
        icon: {
          // name: 'javascript', // should work but doesnt
          src: 'https://upload.wikimedia.org/wikipedia/commons/9/99/Unofficial_JavaScript_logo_2.svg',
        },
        onClick: (
          _button: AdaptableButton<DashboardButtonContext>,
          context: DashboardButtonContext
        ) => {
          context.adaptableApi.filterApi.columnFilterApi.setColumnFilterForColumn(
            'language',
            {
              PredicateId: 'javascript',
            }
          );
        },
      },
      {
        buttonStyle: {
          tone: 'neutral',
          variant: 'outlined',
        },
        icon: {
          src: 'https://upload.wikimedia.org/wikipedia/commons/4/4c/Typescript_logo_2020.svg',
        },
        onClick: (
          _button: AdaptableButton<DashboardButtonContext>,
          context: DashboardButtonContext
        ) => {
          context.adaptableApi.filterApi.columnFilterApi.setColumnFilterForColumn(
            'language',
            {
              PredicateId: 'typescript',
            }
          );
        },
      },
      {
        buttonStyle: {
          tone: 'neutral',
          variant: 'outlined',
        },
        icon: {
          src: 'https://upload.wikimedia.org/wikipedia/commons/6/61/HTML5_logo_and_wordmark.svg',
        },
        onClick: (
          _button: AdaptableButton<DashboardButtonContext>,
          context: DashboardButtonContext
        ) => {
          context.adaptableApi.filterApi.columnFilterApi.setColumnFilterForColumn(
            'language',
            {
              PredicateId: 'html',
            }
          );
        },
      },
      {
        buttonStyle: {
          tone: 'neutral',
          variant: 'outlined',
        },
        icon: {
          name: 'close',
        },
        onClick: (
          _button: AdaptableButton<DashboardButtonContext>,
          context: DashboardButtonContext
        ) => {
          context.adaptableApi.filterApi.columnFilterApi.clearColumnFilters();
        },
      },
    ],
  },
  userInterfaceOptions: {
    customIcons: [
      {
        name: 'javascript',
        icon: {
          src: 'https://upload.wikimedia.org/wikipedia/commons/9/99/Unofficial_JavaScript_logo_2.svg',
        },
      },
      {
        name: 'typescript',
        icon: {
          src: 'https://upload.wikimedia.org/wikipedia/commons/4/4c/Typescript_logo_2020.svg',
        },
      },
      {
        name: 'html',
        icon: {
          src: 'https://upload.wikimedia.org/wikipedia/commons/6/61/HTML5_logo_and_wordmark.svg',
        },
      },
      {
        name: 'popular',
        icon: {
          src: popularIconBase64,
        },
      },
    ],
  },
  initialState: {
    Dashboard: {
      Tabs: [
        {
          Name: 'Default',
          Toolbars: ['CustomToolbarButtons'],
        },
      ],
    },
    Theme: {CurrentTheme: 'light'},
    StyledColumn: {
      StyledColumns: [
        {
          ColumnId: 'language',
          BadgeStyle: {
            Badges: [
              {
                Predicate: {
                  PredicateId: 'Is',
                  Inputs: ['JavaScript'],
                },
                Icon: {
                  name: 'javascript',
                },
                //   IconOnly: true,
              },
              {
                Predicate: {
                  PredicateId: 'Is',
                  Inputs: ['TypeScript'],
                },
                Icon: {
                  name: 'typescript',
                },
                //  IconOnly: true,
              },
              {
                Predicate: {
                  PredicateId: 'Is',
                  Inputs: ['HTML'],
                },
                Icon: {
                  name: 'html',
                },
                //    IconOnly: true,
              },
            ],
          },
        },
        {
          ColumnId: 'name',
          BadgeStyle: {
            Badges: [
              {
                Predicate: {
                  PredicateId: 'In',
                  Inputs: ['react', 'angular', 'vue', 'stencil', 'solid'],
                },
                Style: {
                  BackColor: 'LightGray',
                  ForeColor: 'Black',
                  BorderRadius: 6,
                },
                Icon: {
                  name: 'popular',
                },
              },
            ],
          },
        },
      ],
    },
    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          TableColumns: [
            'name',
            'language',
            'github_stars',
            'license',
            'has_projects',
            'has_pages',
            'created_at',
            'has_wiki',
            'updated_at',
            'pushed_at',
            'github_watchers',
            'week_issue_change',
          ],
          Name: 'Standard Layout',
          AutoSizeColumns: true,
        },
      ],
    },
  },
};

HTML Element Icon

This option allows users to provide the Icon as a DOM element or HTML string.

Deep Dive

The Element Icon Definition

Property	Description
element	The icon to display, either a DOM element or HTML string

Element Icons

Fork Fork

In this example we provide an Icon as an HTML Element, which we use in the button in the toolbar

Styling Icons

The style of an Adaptable Icon - for both system or custom icons - may be customized with the following common properties, defined by AdaptableBaseIcon:

Property	Description
className	The class name of the icon
style	CSS Properties

Application Icon

AdapTable allows users to supply an Application Icon which can be used in multiple places:

Dashboard
Settings Panel
Anywhere where Icons are displayed (e.g Buttons)

This is provided in the applicationIcon property in User Interface Options.

applicationIcon

AdaptableIcon

Icon to display in Dashboard, Notifications and elsewhere

AdaptableIcon

An Icon (of type AdaptableIcon) can be provided.

This will then be displayed in various places, e.g. in the top left corner of the Dashboard or in Notfications

The Icon can be one of 3 types:

System Icon

This is one of the Icons provided by AdapTable (full list available in the Adaptable Icon Library).

adaptableOptions.userInterfaceOptions = {
  applicationIcon: {
    name: 'cell-validation',
  },
};

Custom Icon

This is a fully Custom Icon to be provided by the developer via the src property.

adaptableOptions.userInterfaceOptions = {
  applicationIcon: {
    src: 'https://www.adaptabletools.com/docs/img/favicon_white.png',
    style: {
      height: 50,
      width: 220,
    },
  },
};

HTML Element Icon

This is a reference to an HTML Element.

adaptableOptions.userInterfaceOptions = {
  applicationIcon: {
    element: `<i class="icon-rocket"></i>`,
  },
};

Application Icon

Fork Fork

This example defines a Custom Application Icon (defined in User Interface Options), which is viewable:
- in the top left of the Dashboard
- in the Settings Panel
- in the Toast Notification when an Alert fires (by setting showApplicationIcon to true in Notification Options )

Try It Out

Change the value of any cell to trigger the Alert: note the Application Icon in the Toast Notification
Open the Settings Panel and see the Application Icon displayed

Appendix: AdapTable Icon Library

This is the full list of System Icons available in AdapTable.

add	add-circle	alert	align-center
align-justify	align-left	align-right	arrow-down
arrow-down-long	arrow-expand	arrow-left	arrow-right
arrow-up	arrow-up-long	assignment	badge
bold	boolean-list	brain	broadcast
brush	building	calculated-column	calendar
call	case-lower	case-sentence	case-upper
cells	chart	chat	check
check-circle	checked	clipboard	clone
close	cloud-upload	collapse	collapse-all
color-palette	column-add	column-outline	columns
comment	comments	contact	contains
copy	csv	dashboard	data-set
date-range	delete	division	dock
dollar	download	downloaded	drag
edit	edit-table	ends-with	equals
equation	error	excel	expand
expand-all	exponent	export	export-data
fast-backward	fast-forward	fdc3	filled-circle
filter	filter-list	filter-off	flag
folder	folder-open	folder-shared	function
gradient	greater-than	greater-than-or-equal	grid
grid-filter	grid-info	history	home
horizontal-lines	import	import-export	info
inspector	interactions	italic	json
laptop	less-than	less-than-or-equal	lightning
link	list	logout	mail
menu	minus	money	multiplication
newpage	news	not-contains	not-equal
note	open-in-new	order	organisation
overline	paperclip	pause	percent
percent-tag	person	pie-chart	play
plus	quote	refresh	regex
reminder	resume	rows	save
schedule	science	search	search-table
select-all	select-fwd	select-off	settings
sort-asc	sort-desc	spanner	spark-line
starts-with	statusbar	stop	strikethrough
styled-grid	sync	tab-unselected	target
theme	traffic-lights	triangle-down	triangle-up
unchecked	underline	undo	unfilled-circle
upload	visibility-off	visibility-off-bold	visibility-on
visibility-on-bold	warning

PreviousConfiguring AdapTable Forms NextConfiguring Loading Screen

Framework: