in our business application we heavily rely on editing data in tables. To filter results, we have a "filter-field" on top of every column. Whenever you type something in there, the result gets automatically filtered. This can look something like this

our standard table

Now, we were thinking about including this token-style to our filters, meaning that one can quickly select any of the given values either by typing and/or selecting with the mouse (as seen on Chosen by HarvestHQ for example):

token input

The thing is: some of our columns are really really small (thin). Like the column "Country" where we only display the 2-digit ISO-codes (AT for Austria, ES for Spain, CH for Switzerland and so on...). The column itself is barely wider than those 2 digits.

How could one now incorporate such a token-style to the filter field where an actual token would need more space than the column is wide? And even worse: we have the possibility to search for several countries at once, so when even ONE token is too large, how could we display several tokens in this small field altogether?

Unfortunately it is not an option of changing the column width. Yet there must be some good approach in order to allow users to add/edit tokens of this field intuitively.

Thanks a lot for your insights on this.

2 Answers 2


You could see how spreadsheet software cope with filters. The narrow columns are not a problem. More important to provide feedback for a user.
enter image description here

Using multiple select, even wide columns could be too narrow to display the filtering options. So again, you primary task is to clear display the filtering is applied to columns (system state). The filtering itself is performed in separate control.
enter image description here

Also it worth to note, it's better to use full country name along with ISO-codes in filtering area, as the latter could break usability. And big filtering area alows to do this.

  • thanks for the input. I was thinking of some sort of "filtering area" as you pictured it above, but I have simply not considered NOT showing the current filtering options in the field. And if we're going for the token filter, we will definetly have ISO + full country name :) because currently we have no "autocomplete" or whatsoever.
    – roland_w
    Dec 6, 2013 at 13:26

Is it an option to make the filtering about the whole grid instead of per column? I.e. allow users to combine any number of tokens/tags from different columns.

enter image description here

I always find this sort of tag based searching to be very intuitive.

Perhaps it looks better with the filter input entirely above the grid, but I'm not sure if that's possible in your scenario.

  • I am not sure if this would be intuitive to the user. We tend to have very large tables (lots of columns) - unfortunately. So I guess the token would have to be A LOT smarter if we just had one filter behind it.... yet I will consider your solution :)
    – roland_w
    Dec 11, 2013 at 14:19
  • do you have any example where this has been solved like this (examples in the web world, not Apple Mail :) )
    – roland_w
    Dec 11, 2013 at 14:42

Your Answer

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

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