Data Table Design

In the B2B design, we usually have a lot of tables. What I struggle most is how to fit more columns within limited space. Here I just want to document my exploration of the best practice.

Here’re some articles that I found very useful:

Design better data table: https://uxdesign.cc/design-better-data-tables-4ecc99d23356

Material design data table: https://material.io/guidelines/components/data-tables.html#

Table data design basics: https://design-nation.icons8.com/intro-to-data-tables-design-349f55861803

Design better data tables: https://medium.com/mission-log/design-better-data-tables-430a30a00d8c

I’m trying to avoid horizontal scroll. It’s not very convenient for those who use a mouse. Also, it’s not very natural.

I like the concept of expandable rows, quick view and modal. They are great in reducing the length of the table. But it introduces more dimensions. If there are obvious priority in displaying the headers, we can use that. Sometimes it’s hard to decide what should be in modals and what should stay in the table.

The most flexible way is to customize what’s included in the table.

Here’s an example developed by @lopis. Users can toggle the display of the columns and resize the column.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.