Heads up: This will be a lengthy read when finished.

The humble table, everywhere

Tables have been a cornerstone of information design for centuries, using rows and columns to organize data. In digital products, tables often take on new forms, such as cards that emphasize key details.

Now think about any product you use and you’ll quickly realize that almost every feature or page features a table: Managing user permissions? That’s a table. Browsing videos? Another table. Checking your bank accounts? Yet again, a table. Hunting for best deals on PS5? You are interacting with a table.

Despite their ubiquity, designing an effective table, especially a data table, is far from simple. Here are some tips to get a head start.

Table versus data table

Let’s start with making a distinction between a table and a data table. This distinction is important, because it’s the fundamental exercise to frame the user experience problem at hand.

At first glance, a regular table and a data table might look similar. Both use rows and columns (or a card layout), but the key differences lie in functionality, purpose, and data structure. A regular table assumes a fixed, predictable structure, while a data table is often built to accommodate variations in data models, sometimes even client-specific customizations.

Data model

The design of a data table is heavily influenced by the underlying data model, which determines the structure, fields, and variability of the data being displayed. This is an aspect most designers in SaaS or B2C contexts do not need to think about, but is crucial especially for enterprise applications.

A standardized data model has a fixed schema, with the same structure and fields for all users or scenarios. This makes designing data tables more straightforward because the table layout can be predictable and less flexible.

In some applications, the data model is customized per client or project, with fields and structure that vary significantly. This is common in industries like CRMs and ERP systems, where each client has unique requirements. Custom data models have a direct impact on UX design:

Dynamic columns: The table needs to adapt dynamically to display different fields based on the client’s configuration.

Customization features: Users should be able to reorder, resize, or hide columns to suit their workflow.

Advanced filtering: Filters must accommodate varying field names and types.

Custom data models pose many challenges for designers due to having to accommodate too many moving parts. This means the UX copy (e.g. column labels) is not in designer’s control, there could be many edge cases to support such as exceptionally long field names or special characters that might have not been accounted for in the search functionality.

Data types and states

Have you noticed that the data tables in your product look inconsistent, even though they follow the same typographic styles, colors, and padding? This subtle inconsistency often stems from how data types and data states are handled across different tables.

Data tables are not just containers for information—they reflect the underlying structure and state of the data they display. Data types, such as text, numbers, dates, or currencies, require appropriate formatting to maintain clarity and usability. For example, dates may follow different formats, numbers might need proper alignment, and currencies often require symbols or decimal precision.

Data states, on the other hand, represent the condition of the data. Empty fields, loading placeholders, error states, or dynamically changing data (e.g., real-time updates) all demand unique design treatments. Without a standardized approach to handling these variations, even visually similar tables can feel disjointed or unpredictable to users.