What's the best way to display multiple tags/labels in a table row?

Question

We have screen in our application which displays all files uploaded. Each file is able to be assigned tags (as many as needed) which can help with filter and search. Tagging is assigned via the overflow menu or within the document view.

Currently, file list table has a column for tags, but not entirely sure what to do with:

1. Tag overflow
2. Column size vs truncation. We do have multiple breakpoints and tags will likely not render on smaller screens as we opted for more of a card based approach vs a table.

My current thought for point #1 was to have the tags side by side (as many as can fit) and then include a +(number) overflow. Hovering on the count would render a list of all assigned tags.

My thought for point 2 was to only truncate the first tag. If the next tag in the array doesn't fit, then it goes in the overflow. Feedback from our dev team is that there could be a lot of math involved and this could get very complicated to build. They were assuming we could show a fixed number of tags in the column and truncate all tags needed, then overflow the rest.

Am I on the right track? Any suggestions?

See attached

Answer 1

I like the Tag Overflow Idea better. Allows user to view all the values merely on a hover if there are more of it.

Regarding displaying fixed number of tags: I don't see any downside with this approach - and users will get right away if there are lesser number of tags that you guys decide to fit in. For making it work effectively, you can consider asking users to provide primary tags and secondary tags. If you think, 3 is good number that you may fit in - then allow user to provide upto 3 values for primary - and as many as they want in secondary. This way - you would display 3 values which users think are primary tag info for a document.

I would recommend not truncating the any tag value. And fitting more - would clutter the table and won't serve any purpose - assuming users don't always get what truncated word could be - that being said - you will end up forcing users to look at each word(on hover) as opposed to giving them a glimpse of primary tags.

Hope that helps!