Designing tables

A comprehensive visual guide to designing features and functionality for enterprise SaaS tables

Andrew Coyle
3 min readNov 2, 2023

Many people got value from an article I wrote on tables in 2017. I created an updated version of this article with new visuals.

The future looks on the past through data. Everything happening now lives on through memories subject to bias and recreation. History is determined by what’s written, the writer, and those to reconstruct the fragments left behind.

Large datasets power the modern world. The success of future industries will combine advanced data collection with a better user experience. Data tables comprise much of this user experience. Let’s learn how to design them better.

Fixed Header

Fixed columns horizontal Scroll

Resizable columns

Row Style

Display Density

Hover Actions

Inline Editing

Row count

Pagination

Quick view drawer modal

Expandable Rows

Modal

Multi-Modal

Row to Details

Searchable Columns

Sortable Columns

Basic Filtering

Customizable Columns

Learn more about designing table column customization in my new article.

I plan to continue to design, code, and write about UI components and patterns for enterprise SaaS. I aim to create a product that allows software designers and engineers to plug into a comprehensive set of UI components to build amazing interfaces. Stay tuned! If you’re interested, sign up to stay informed on my progress.

Get the free design system

--

--

Andrew Coyle
Andrew Coyle

Written by Andrew Coyle

Formerly @Flexport @Google @Intuit @HeyHealthcare (YC S19)

Responses (9)