Data table design examples

What is a data table in UI design?

A data table shows a set of records as rows and their attributes as columns. It is the default way to present anything a user needs to scan, compare, sort or edit in bulk: orders, users, transactions, logs. A good table lets people find one row quickly and act on many rows at once.

What makes a table easy to read?

Left-align text and right-align numbers, so digits line up for comparison. Keep the header visible while the table scrolls. Separate rows with spacing and light dividers, not heavy grid lines. Put the identifying column first and freeze it when the table scrolls sideways. Shorten long values and show the full text on hover or in a detail view.

Pagination or infinite scroll for tables?

Pagination suits tables people work through or return to, because a page number is a place they can come back to. Infinite scroll suits logs and feeds that are read once from the top. For large data sets, add filters and search before adding more rows per page.

Where do these table examples come from?

About half are tables from shipped products documented by Mobbin. The rest are table designs published on Layers and Dribbble. Muzli follows more than 200 design sources and lists up to 60 matching pieces here, favouring recent work.