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.