Icon Type Column in Power Tables

Business Background

Add custom icons to the power table to enhance the visual representation of data. Adding icons to a power table has many different uses, such as:

  • Icons can also be used to trigger actions or show messages.
  • Icons can visually represent important data points, making them easier to identify and understand at a glance. 
  • Icons can be used to distinguish between different categories or statuses within your data.
  • Icons can be especially helpful for users with visual impairments or language barriers.

Titan Solution

You can add many different custom icons, including SVG, to the power table and configure it to suit your business needs.

How to Video

Coming soon!

How to Guide



Add a power table to the Web project.

  1. Select a Salesforce source, for instance, Account.
  2. Add conditions, if necessary.
  3. Add mapping.
  1. On the Mapping screen, add a column if necessary.
  2. Select the Icon option from the drop-down list.
  3. Click the Edit icon to add an icon. The Select Icon screen opens.
Mapping screen
Mapping screen
  1. Under the Material UI option, use the Search field, if necessary, and click on an icon to select it.
Select Icon screen - Material UI option
Select Icon screen – Material UI option
  1. As an alternative, click on the Ionicons option.
  2. Use the drop-down list to select an option:
    • Filled
    • Outline
    • Sharp
Ionicons (edited image as example)
Ionicons (edited image as example)
  1. Alternatively, click the Custom option and add SVG code.
  1. Click the button to Configure On Click Action. Click here for more information.
  2. If necessary, change the column’s name in the field.
Mapping screen
Mapping screen
  1. Click the Kebab button to open the list and do the following:
Kebab button
Kebab button
1Add Subheader
2Include an Action toggle switchUse the toggle switch to enable the Include an Action option.
3Include an Action Gear icon Use the Gear icon to configure the action. The On Click Action screen opens.
Click here for more information on the On Click Action.
4Click the icon checkboxThe Click on icon is only active if the Include an Action is on.
Click the checkbox to add an icon.
5Click the icon Edit iconUse the Gear icon to set an icon.
Click here for more information on the icon configuration.
6Configure componentClick the Configure component option. You can configure a table, chart, or an IFrame component.
7Configure Tooltip MappingClick the Configure Tooltip Mapping option. The Configure Tooltip Mapping popup opens.

Use the drop-down list to select a field for the tooltip. It is suggested that the tooltip corresponds with the column contents.
8Delete RowClick the Delete Row option to delete the row from the table.
  1. Click the Apply button.
  2. Save and Preview the project.

The icon is added to the column where you configured it.

Hidden Title

Need more help?