Table Filtering (7 min)
Completion requirements
01 Getting Started
This tutorial looks at table filtering for your Power Table in Titan Web. We show you how to set up column filters, configure global filters, and, lastly, how to work with external filters for your Power Tables.
02 How to Set Up Column Filters
1. Navigate to Interactivity in your Power Table Settings panel and select the Allow Filtering checkbox.
2. Select the column that you would like to filter with the Columns Filter drop-down menu. For our example, we have chosen to filter the Power Table’s column by Full Name and Birthdate.
2. Select the column that you would like to filter with the Columns Filter drop-down menu. For our example, we have chosen to filter the Power Table’s column by Full Name and Birthdate.
03 How to Change the Filter Type
1. Head over to Columns in your Power Table Settings panel and select the gear icon next to the Birthdate column.
2. Select the Filter By checkbox and click on the gear icon to open the Configure Filter settings.
3. Change the UI Control option to Date Range with the drop-down menu before clicking on the Apply button.
4. Notice that your filter has now changed in your Birthdate column in your Power Table.
2. Select the Filter By checkbox and click on the gear icon to open the Configure Filter settings.
3. Change the UI Control option to Date Range with the drop-down menu before clicking on the Apply button.
4. Notice that your filter has now changed in your Birthdate column in your Power Table.
04 How Filtering Works
1. Save and Preview your project.
2. Use the calendar icon to filter between the birthdate range to pull through specific ranges of dates.
3. Alternatively type in the filter in the Full Name column to organize data by a full name.
2. Use the calendar icon to filter between the birthdate range to pull through specific ranges of dates.
3. Alternatively type in the filter in the Full Name column to organize data by a full name.
05 How to Set Up Global Filters
1. Go to Interactivity in your Power Table Settings panel and select the Allow Global Filter checkbox. This checkbox sets up a global filter for your entire Power Table instead of a specific column. You can use the global filter to search based on any columns in the Power Table.
2. Save and Preview your project.
3. When you type a word into the global filter, the Power Table will display data that matches the search from any column.
2. Save and Preview your project.
3. When you type a word into the global filter, the Power Table will display data that matches the search from any column.
06 External Filters
External filters are a cool functionality that allows you to use an external input field or variable.
Our tutorial will show you how to work with external filters on an input field.
1. Drag a text field to your canvas from the elements library and click on the gear icon to bring up the Text Settings panel.
2. Add a name to the Label field. For this example, we have chosen External Filter which allows us to filter based on the Text Field.
Note, that you can set up your text field in several ways. For example, you can write a condition that every time the text field changes the filter can run. In our tutorial, we will simply add and use buttons.
3. Add a primary and secondary button to the canvas and type on the buttons to rename them to Search and Clear Filter.
4. Click on the link button to add an On Click action to the Search button.
5. Click on the + button under the Start icon to open the Add Node menu.
6. Choose the Element Interactivity tab and select the Table Interactivity button before clicking on Next.
7. The Table Interactivity settings box pops up. In our tutorial, we have chosen Filter Table for our action, Power Table as our table element, and Field and External Filter as the values before clicking on the Next button.
8. Remember to add a tag. We have used External Filter as our tag before clicking on the Insert button.
9. Preview your example, the demonstration shows that if you search for a word in the External Filter text field and click on the Search button, the relevant data should display in your Power Table.
1. Drag a text field to your canvas from the elements library and click on the gear icon to bring up the Text Settings panel.
2. Add a name to the Label field. For this example, we have chosen External Filter which allows us to filter based on the Text Field.
Note, that you can set up your text field in several ways. For example, you can write a condition that every time the text field changes the filter can run. In our tutorial, we will simply add and use buttons.
3. Add a primary and secondary button to the canvas and type on the buttons to rename them to Search and Clear Filter.
4. Click on the link button to add an On Click action to the Search button.
5. Click on the + button under the Start icon to open the Add Node menu.
6. Choose the Element Interactivity tab and select the Table Interactivity button before clicking on Next.
7. The Table Interactivity settings box pops up. In our tutorial, we have chosen Filter Table for our action, Power Table as our table element, and Field and External Filter as the values before clicking on the Next button.
8. Remember to add a tag. We have used External Filter as our tag before clicking on the Insert button.
9. Preview your example, the demonstration shows that if you search for a word in the External Filter text field and click on the Search button, the relevant data should display in your Power Table.
07 Clearing Searched Data from Power Tables
This demonstration shows how to configure a button that will clear any filter actions that were made on the table. To do this, follow the steps below.
1. Click on the link button to add an On Click action to the Clear Filter button.
2. Click on the + button under the Start icon to open the Add Node menu.
3. Choose the Element Interactivity tab and select the Table Interactivity button before clicking on Next.
4. The Table Interactivity settings box pops up. In our tutorial, we have chosen Clear Row Selection for our action and Power Table as our table element before clicking on the Next button.
5. Remember to add a tag. We have used Clear Filter as our tag before clicking on the Insert button.
6. Save, preview, and refresh your browser to interact with your demo. When you click on the Clear Filter button after you have searched for data, your Power Table findings will be cleared and the data will return as it was displayed before the search.
1. Click on the link button to add an On Click action to the Clear Filter button.
2. Click on the + button under the Start icon to open the Add Node menu.
3. Choose the Element Interactivity tab and select the Table Interactivity button before clicking on Next.
4. The Table Interactivity settings box pops up. In our tutorial, we have chosen Clear Row Selection for our action and Power Table as our table element before clicking on the Next button.
5. Remember to add a tag. We have used Clear Filter as our tag before clicking on the Insert button.
6. Save, preview, and refresh your browser to interact with your demo. When you click on the Clear Filter button after you have searched for data, your Power Table findings will be cleared and the data will return as it was displayed before the search.