Start by understanding what users need to do with those tables!
Before we dig in, I wanted to remind you that all those articles give generic advice and some design ideas of patterns. At the end of the day, your users have specific needs. My number one advice when you need to design tables: do your user research. Understand exactly what users need in those tables. What they use those table for. Maybe in those 20 rows, 3 are never used by anyone and you can remove them? Or maybe you really want to remove 10 of those rows, but you discover that this is used by the core banking system and users need all of those indicators. Don’t take any table design decisions without really understanding how this table is going to be used. And who knows, maybe a table is not even the right design element choice anymore and you might end up display all that data in a complete other way/component!
UX Booth is usually a good source of information. This article is a good introduction to table design and covers all the basics: cell padding and height, adjustable columns size (trust me, when you have a lot of data those can become handy), how to deal with big headers, zebra stripes and row freezing, alignment tips, how to link data, pagination, sort, filter, search, etc.
And oldy (2010) but still goody! This article goes back to the basics of table UI patterns: alternating rows (stripes), full row selection, table selection, sorting, filtering, pagination, continuous scrolling, fixed headers, headerless tables, expandable rows, row actions, etc.
This article provides small GIFs of different types of tables (fixed header, horizontal scroll, resizable columns, row style, etc) and then goes deeper into specific patterns like display density, visual table summary, pagination, hover actions, inline editing, expandable rows, quick view, modals, multi modals, row to details, sortable columns, filtering, searching, adding column, etc.
This is a detailed use-case of table design with the main challenges of tables and a lot of visual examples again: pagination, edit modes, actions, customisation, truncation, usage of imagery and iconography, view indicators, expanded view, etc.
I like that this article starts with user research (obviously) and user needs around those tables. It then goes into more technical details and brings an atomic approach to designing table components like cells, headers, filters, columns, top bars, etc. The article also gives some advice on some specific types of tables, interactions and responsive web design
It starts with an introduction on how and when to use tables , what information to display and then gives details tips on text alignments, sizing, typography duplication and commons table patterns like bulk actions, group and sorting, pagination again, fixed columns.
Designing data tables specifically for enterprise apps
This post breaks down common enterprise application UI patterns, problems and solutions regarding tables: basics, responsive tables, how to deal with a lot of data (pagination, lazy loading, searching, sorting, data summaries, etc.), how to design for the unknown future data, dealing with actions
This article gives a lot of visual examples of how to design tables for enterprise products: simple data, data with images (like avatars), with a link, headers, search in column, tables that can be customized, sorted, tables with a large number of columns with column freeze, editable datas, errors and actions, data alignment, grouped data and resizable columns.
How to fit big tables with a LOT of content in any screen size
Apart for the generic case of “how should a table” work, my biggest challenge while working in enterprise UX is “what am I going to do with all that data”. I told you in the introduction, the first step is to really understand user needs here, what they try to do with that data. There’s a few interesting resources online as well to help you.
Raluca Budiu recordedfor NNGroup this awesome 4 minutes videos where she walks you through different strategies. It (again, shocking?) again comes down to understanding what people want to do with those tables and trying to design ways to help them accomplish this: hiding columns, vertical scroll, re-ordering columns, etc.
A few UX Stackexchange threads on displaying too much data in tables
UX Stackexchange is a nice place where you can go and ask questions to other UX practitioners. Here are a few threads that you might want to read and follow:
New articles delivered to your mailbox! Newsletter subscribers also get some exclusive resources and discounts to some events along the year. I won’t share your email, and you can unsubscribe anytime.
(If you didn’t get a confirmation email, or the resource, check your spam box.)