So you’ve built a table. That probably means you need a bunch of filters to go with the table. These filters can be cumbersome, steal valuable real estate from the visualization, and frankly: just look ugly. This blog post discusses two alternatives for how to apply filters to tables in a more sensible manner so you don’t have to have filters that look like this:
Really, we should be making filters a secondary or tertiary attribute of our dashboards–something that doesn’t dominate a significant portion of space relative to the insights it’s providing (which is basically none). Instead, it may make sense to put your filters in a header or have a dashboard action that makes the filters pop-up on the page. And that’s what this tutorial is about: how to make pop-up filters.
This solution only requires the table that you’ve already created but it also requires us to be ready to organize everything in containers. This dashboard will mix floating and tiled. We’ll build the example using {Sample – Superstore}.
Step #1: Build the base table
Add [Customer Name] to rows. Sort this dimension descending using sum of Sales.
Next you’ll create the measures that will be on the table. You’ll then use [Measure Names] and [Measure Values] to build the table.
This table includes total sales, total profit, profit ratio, and total orders. Sales and profit are base measures, but you’ll need to build profit ratio and total orders. Here is profit ratio:
// Profit Ratio
SUM([Profit])/SUM([Sales])
And total orders:
// Total Orders
COUNTD([Order ID])
Now bring [Measure Names] to columns and [Measure Values] to text. Be sure that SUM(Sales), SUM(Profit), Profit Ratio, and Total Orders are in the [Measure Values] card.
Step #2: Build the custom filters
If we are going to use a standard dimension filter, then we can simply show the filter n the sheet and continue. If you are planning on using measure filters you can technically show those filters as well and there should be no issues. The technique you will utilize in this post you will need to create two parameters: one that will set the direction of the comparison and another that sets the value of the comparison.
For instance with the profit “filter” it is actually one parameter that we select the type of comparison we want to make and a second where we insert a value. This second parameter is actually a string parameter (but we’ll get to that).
Start by creating a new string parameter with a list. You’ll create this example for profit called [profit sign parameter]. Add the following values:
Create a second parameter called [profit parameter] as a string. Leave the string empty! This is key!
From here you are going to build a boolean calculation that you will ultimately put on the filters shelf. Create the next calculation called [profit | tf]:
// profit | tf
CASE [profit sign parameter]
WHEN ">" THEN SUM([Profit]) > FLOAT(REGEXP_REPLACE([profit parameter],"[^0-9.]", ""))
WHEN ">=" THEN SUM([Profit]) >= FLOAT(REGEXP_REPLACE([profit parameter],"[^0-9.]", ""))
WHEN "=" THEN SUM([Profit]) = FLOAT(REGEXP_REPLACE([profit parameter],"[^0-9.]", ""))
WHEN "<=" THEN SUM([Profit]) <= FLOAT(REGEXP_REPLACE([profit parameter],"[^0-9.]", ""))
WHEN "<" THEN SUM([Profit]) < FLOAT(REGEXP_REPLACE([profit parameter],"[^0-9.]", ""))
END
The calculation looks for the sign [profit sign parameter] and then compares SUM([Profit]) to the value in the [profit parameter]. Remember [profit parameter] is a string (and technically could be formatted in many ways). We’ll use regex to remove any errant symbols like “$” and then convert the value to a float.
Repeat this for all measures you want to create a filter for. This example includes filters for profit, sales, profit ratio, and total orders.
Add [profit | tf] to filters. If your [profit parameter] is empty then your filter is empty then the filter pop-up will look like this:
Update the [profit parameter] with any numerical value. Then edit [profit | tf] the filter and select True.
Repeat this for any additional filters you may have created.
Step #3: Build the filter pop-out
Building the pop out requires us to place our filter and parameters on our view and move them into a series of floating containers.
Getting the order of these containers correct can be difficult but we created a blueprint for you. Move your parameters, filter, and custom text into the following setup (it will take a while to get correct. As you are doing this make sure to set the inner- and outer-padding to 0px. Don’t worry completely about sizing quite yet.
Once you have the order correct your containers, change the background color of the outer-most vertical container and your visualization will look like this:
Add one more container to your visualization. Set the background color to white, but with 80% opacity. Place this container in the top-left corner of your dashboard. Add your cluster of filters to this container. On the new outer-most container (the transparent one) set the x and y to 0 and the height and width to the entire dashboard. Now add padding to the top and bottom, left, and right so the filter grouping is in the middle of the dashboard. This will take a bit of time to get right. Here are the coordinates for the example:
Step #4: Add Show/Hide to the filters
Take the outermost semi-transparent and add Show/Hide Container functionality. Place the button in the top-left corner of the dashboard. Edit the item hidden image and change it to a filter (I use flaticon.com). Once you complete this you’ve added a custom filter.
This produces the following dashboard:
So whats the final result with pagination and row density control? This table:
Need more help making your Tableau dashboards a work of art? Our knowledgeable team of Tableau experts is here to help!
