8

I have a table of data that can be filtered by name, location or status.

Table of data for Filtering

The data of each of these columns will be obvious to the administrators of the Portal (i.e that the first column is child's name, the second their location).

I therefore added filter options in place of the headings. The field placeholders act as a label in themselves as they allude to the column name e.g 'filter by location'.

One of the most useful filters will be Child Status, I have therefore repeated this filter in the right hand column, giving numbers for total children of each status. The status filter may be overlooked at the top of the table, therefore I have given it clear prominence to the right, and also reduced the filter to a single click.

Questions

  • Is it appropriate replacing table headings with the filter options as shown in the screenshot?

  • What do you think of repeating the status filter on the right hand side. (Note this is likely to take the form of simple links rather than checkboxes).

Improve this question
1

2 Answers 2

Reset to default
9

The filter method you suggest usually works pretty well. We're using a variant of it in one of our products:

Filtering of data table example

This way we still have a heading row at the top which you can use for ordering data. This also ensures that you know which column contains what even if a value has been filled in the filter.

Disclaimer: this is a web-app for which the users are thoroughly trained. I would recommend adding some visual clues to explain these fields are used for filtering (a label or icon). Also a submit button could be considered (we are only doing live filtering at the moment).

One other thing: when you have a table with a lot of data (and column names/values that the user isn't very familiair with) it could make sense to make the heading row stick to the top of the viewport when scrolling down or repeat the heading row every X rows.

Improve this answer
2
  • 1
    good point on keeping headers to allow ordering of data
    – slawrence10
    Jan 10, 2013 at 17:44
  • Thanks for mentioning icons - I have a filter box that needed a little extra something besides a label. A filter icon will do nicely.
    – Surreal Dreams
    Apr 23, 2014 at 22:28
4

I think the filtering links at the top of the table work well.

At first I couldn't make sense of your Right hand filtering table - but I realise its similar to the Amazon filtering system. So perhaps better to put the filtering table on the left hand side?

enter image description here

I've also seen it done above the table with WordPress, which seems more noticeable than your right hand table (I know you said that you put it on the RHS to give it more prominence but it seems to be less prominent and certainly further away from where the user will be looking):

enter image description here

Improve this answer
1
  • 1
    Appreciate the thoughts on change the Status filter position and like the examples. Will definitely be implementing something along the lines of these.
    – slawrence10
    Jan 14, 2013 at 18:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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