External Global Filter

Business Background

Position your global filter outside the power table to search the contents of the whole table to suit your business needs.

Titan Solution

Titan Web lets you add a global filter field externally to the power table using any input element. When filtering the information in the power table, all the data fields are considered.

How to Video

Coming soon.

How to Guide

Note:

This is a different feature than the filter options inside a power table:

Note:

Prerequisites:

  1. Add a power table to your project.
  2. Add an input element, for instance, a text field, outside the power table. In this example, the text field was renamed to Global Filter. This makes it easier to search for the element later.

In this example, two shapes are added to configure the On Click Actions. You can also use buttons.

Example with input element outside power table
Example with input element outside power table
  1. Click the Checkmark element and click the Gear icon to open the Icon Settings screen.
  2. Under Interactivity, click the Configure On Click Action button. The On Click Action screen opens.
Icon Settings screen
Icon Settings screen
  1. Click the + icon to add a node. The Add Node screen opens.
+ icon
+ icon
  1. Under Element Interactivity, select Table Interactivity and click the Next button. The Add Node/Table Interactivity screen opens.
Table Interactivity option
Table Interactivity option
  1. In the Action field, search for “filter”. Two options are shown.
Add Node/Table Interactivity screen
Add Node/Table Interactivity screen

Filter Table option

  1. Click the Filter Table option.
  2. Use the Table Element drop-down list to select the power table.
  3. Use the Value drop-down list to select the Field option.
  4. Use the drop-down list to select the input element. This is the element you added outside the power table. In this example, it is called Global Filter.
  5. Click the Next button.
Add Node/Table Interactivity screen
Add Node/Table Interactivity screen
  1. Add a tag if necessary and click the Insert button.
  2. Click the Apply button on the On Click Action screen.

Clear Filter option

  1. Refer to step 1, but choose the Clear element and do up to step 5.
  2. Click the Clear Table option.
  3. Use the Table Element drop-down list to select the power table.
Add Node/Table Interactivity screen
Add Node/Table Interactivity screen
  1. Click the Next button.
  2. Add a tag if necessary and click the Insert button.
  3. Click the Apply button on the On Click Action screen.
  4. Save and Preview your project.
  5. Type a search term in the Global Filter field and click the Checkmark icon.
Filter data example
Filter data example

The search results are shown:

Results example
Results example
  1. Click the Clear icon to clear the results and show all the entries in the table.

Hidden Title

Need more help?