UX for filtering a table of data

Question

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

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).

Answer 1

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

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.

Answer 2

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?

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):