I've checked the material design documentation but there is no clear indicator that I can see to tell me what happens if I click on the filter list icon.

Here's the icon in situ.

filter icon in situ, look to the top right of the image

I want to know what the interface behaviour should be. Do we get a drop down of filter terms? Can the user specify the filter value? How does it manifest itself once the user has selected their filter value? Any help is gratefully received. Thanks

  • 1
    Are you sure that's a filter icon? It looks more like Sort, since it's three lines sorted by size. But it's still not obvious what the behavior would be. – Ken Mohnkern Nov 18 '16 at 20:42
  • @KenMohnkern it is a "Filter List" icon, you can search "filter" in material design icons to see it. – Alvaro Jan 4 '17 at 14:34

Here's how Slide for Reddit utilizes the button.

enter image description here enter image description here

If you need a Custom Filter, I would recommend you to have a separate activity pop up for the Filters one needs to select and they can then click Done to see the changes reflect on the actual activity. This will prevent the complexity of adding the custom filter into a drop-down.

  • Thanks Swapnil, The use of the filter in Reddit or similar circumstances is pretty straightforward. In the context of a data table though the filter is unlikely to be useful if filled with predefined filter terms. Hence my question really should be how would the filter behave if a custom term was required? Does the pattern break at this point? It starts to sound like a custom variant of the pattern. – Ralph Marchant Jul 25 '16 at 9:00
  • Could you give an example of the Custom filter you would want? I mean, what do you want to filter it as? – Swapnil Borkar Jul 25 '16 at 14:41

This icon is from the category of symbols used in / for buttons. It seems intuitive to me that if I click on the "filter list" icon in your example, the filters are displayed, because, without filters, the action can't be completed.

How the filters will look, depends on the number of options, page UI and I think Material Design offer some guidance, but it is not so strict that we need to have clear specs for every icon.

In this case, "Material Design Data Table", the filter is a search field. I didn't expect this filter, but I can't say this is not a good UX.

enter image description here

enter image description here

This question has been here for some months without a successful answer. As there is no official implementation (at least posted in the answer so far) we can only guess.

My guess is that the filter might not be related to the elements but to which columns are being displayed. Filtering elements is probably more relevant but then why would it be missing from the guide?

So in the same way as in this JSFiddle the table columns are "filtered". Clicking the icon might bring a List to check which columns should be displayed.

enter image description here

Material design - Tables page specifies the possible interactions:

Supported interactions

Row hover (desktop)

Row selection

Column sorting

Column hover (desktop)

Long header titles

Text editing

Menus

The one that fits best the Filter action is Menus.


A similar Filter action I could find is in the App Bar:

Clicking it displays a menu:

The icon used in the App bar is already in use in the table as a dropdown arrow:

So for a table my guess is a simple menu would display, and the selected query would appear next to the icon.

I've got the same question. I'm going to open a dialog that displays chips the user can select/deselect to filter the results in the table. This appears to be consistent with what the current version of Material Design is suggesting as per this image:

enter image description here

I've seen this filter pattern used with Menus: https://www.google.com/design/spec/components/menus.html#

The filter types will appear in the Menu. Once tapped, the items in the table will sort. Depending on the complexity of the table, it may need to reload using an indeterminate activity spinner. If it's a simple table, it can animate in view. Hope this helps. Cheers.

  • Thanks Aaron, I think the menu pattern is pretty straightforward. I perhaps should have phrased my question better. If the button creates a filter, it seems a little odd that all the filter terms would have to be predefined. I am curious as to how a custom filter may manifest itself here. Have you seen anything like this in google material before? – Ralph Marchant May 27 '16 at 8:43

I would expect clicking the filter button to bring up filter options. On desktop, I'd probably expect a dropdown with filter options:

Airtable filter dropdown (https://airtable.com/)

YouTube does something similar as well:

enter image description here

Your Answer

 
discard

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.