UX Collective

We believe designers are thinkers as much as they are makers. https://linktr.ee/uxc

Follow publication

Member-only story

Designing better data tables for enterprise UX

Data table for entrrprise UX
Data table for enterprise User Experience design.

If you have worked on enterprise products, you must have noticed the use of lots of data tables. Therefore, I am writing this article to collect the most common use cases and discuss how elegantly we can handle them.

Let’s start with the most simple data table with basic functionalities such as showing data in a grid, with a way to expand the rows to see more details.

In the design, you will notice that I have intentionally removed showing numbers for pagination. When you show pages users won’t have any clue what is inside those pages, so it does not make any sense for the user to go to a specific page. But, it is essential to show the data set count as well as the ability to go to the next or previous page. You will find this pattern even in Gmail.

Simple data table
Simple data table
Data table expanded view.
Expanded view

When showing images show them in a round mask. There are lots of articles written on why the round shape is better than a square one when showing someone's photo.

Create an account to read the full story.

The author made this story available to Medium members only.
If you’re new to Medium, create a new account to read this story on us.

Or, continue in mobile web

Already have an account? Sign in

Responses (19)

Write a response

right-aligned.

It looks like you are left aligning the zip code and phone number, no? Any particualr reason, since these are numeric?

--

I love the article, beautiful tables, and design, but how does this stand up to a client that demands 10-15 columns of dense data because for various reasons that are irrefutable.
I am not saying what is presented is not correct or beautiful, quite…

--

Great inspiration! What is missing though is how to integrate data visualization in data tables: spark lines, spark bars, color-coded cells and so an.

--