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

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.

4. Under the Material UI option, use the Search field, if necessary, and click on an icon to select it.

5. As an alternative, click on the Ionicons option.
6. Use the drop-down list to select an option:
   • Filled
   • Outline
   • Sharp

7. Alternatively, click the Custom option and add SVG code.

8. Click the button to Configure On Click Action. Click here for more information.
9. If necessary, change the column’s name in the field.

10. Click the Kebab button to open the list and do the following:

Number	Option	Description
1	Add Subheader
2	Include an Action toggle switch	Use the toggle switch to enable the Include an Action option.
3	Include 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.
4	Click the icon checkbox	The Click on icon is only active if the Include an Action is on. Click the checkbox to add an icon.
5	Click the icon Edit icon	Use the Gear icon to set an icon. Click here for more information on the icon configuration.
6	Configure component	Click the Configure component option. You can configure a table, chart, or an IFrame component.
7	Configure Tooltip Mapping	Click 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.
8	Delete Row	Click the Delete Row option to delete the row from the table.

11. Click the Apply button.
12. Save and Preview the project.

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