Welcome back. As designers, we often focus on technical skills…but what about the subtler signs of growth? This week, I shared a LinkedIn post outlining seven key indicators that you're evolving as a product designer. Spoiler alert: It's not about tools. It's about transforming how you think, communicate, and solve problems. So, as we dive in today, ask yourself: What's been clicking for you lately that has nothing to do with your technical skills?

—Tommy (@DesignerTom)

The Wireframe:

• Designing complex data tables that don't suck
• Figma tips for building flexible table components
• How do you deal with super-wide tables?

How to Design Complex Data Tables (That Actually Work)

Let's face it: complex data tables are the bread and butter of enterprise software…and a massive pain to design well.

But with some smart thinking and a few tricks up our sleeve, we can create tables that users actually want to use.

Here's how to turn that data chaos into design gold →

1. Plan Before You Design

Before you even open Figma, you need to understand the beast you're dealing with.

Complex data tables require careful planning to ensure they're both functional and user-friendly. Slava Shestopalov suggests creating a table tree diagram to map out all your features, states, and accessories—a visual blueprint that helps you spot potential headaches:

Key questions to ask:

• What functionality do users actually need? Drag-and-drop? Resizing? Multi-sorting? Remember: draggable controls must be keyboard-accessible due to WCAG 2.2 AA requirements.
• What types of data will each column contain? Not all data is created equal. Some cells might be read-only, others editable. Plan this out early.
• What actions will users perform on this data?

If you’re working with an existing table, start by pinpointing what’s working—and what’s not. This checklist is a great place to start.

​
2. Prioritize Clarity and Flexibility

When dealing with complex data, it's tempting to show everything at once. Resist this urge.

Instead, ruthlessly prioritize what users see first and finding creative ways to progressively disclose additional information.

Make data understandable:

• Right-align numbers and use monospaced digits
• Use subtle background colors for headers
• Bold primary identifiers (e.g., names, IDs)
• Replace text with icons for statuses and actions

Build in flexibility:

• Allow users to freeze, reorder, hide, and resize columns
• Use expandable rows to allow users to reveal additional details
• Offer options for condensed, regular, and relaxed row heights

3. Focus on Interaction and Performance

With complex data tables, performance isn't just a technical concern—it's a core design feature. These features make your tables more interactive and responsive:

Sortable columns:

• Add persistent sort icons (like small arrows) next to column headers
• Use prominent icons to indicate active sorting (ascending/descending)

Multi-select and bulk actions:

• Include a select-all checkbox in the header and individual checkboxes for each row
• Display a sticky contextual action bar for bulk operations

Inline editing:

• Provide clear visual cues for active editing, like a highlighted border
• Offer obvious "save" and "cancel" options, either as buttons within the cell or through clear keyboard shortcuts (enter to save, escape to cancel)

Feedback and confirmation:

• Use subtle animations or color changes to confirm successful actions
• Implement confirmation dialogs for destructive actions
  ​

4. Building a Flexible Component System

A modular, flexible system for table components is the not-so-secret shortcut to maintainable, efficient, and adaptable tables.

This Mindesigning video shows you exactly how to create dynamic table components on Figma. A quick breakdown:

• Create reusable cells for different data types (text, numbers, dates, etc.)
• Combine these into column components to easily swap out different data types within a column
• Assemble full table components to easily create and maintain complex tables
• Utilize auto layout and flexible sizing for adaptability

5. Adapting for Mobile

Ditch the traditional row-column structure for small screens. Focus on the data itself rather than its tabular layout. Some techniques to try:

• Present each row as a compact card with key info
• Use a sliding bottom sheet for row actions and vertical accordions to stack columns/combine related columns to reduce horizontal scrolling
• Ensure touch targets are at least 44×44px
• Place pagination controls at both top and bottom
• Avoid hover-dependent actions that don’t translate well to touch devices

Remember: Users don't expect mobile tables to look identical to desktop versions. But they do expect core functionality to exist on both.

​
​The bottom line: Effective table design balances power and simplicity. Start with user needs, focus on core functionality, and then adapt for different devices and interaction methods.

Together with UserTesting​

Designers, Let's Take on THiS 2024

Want to transform how you build products? Join me at UserTesting's annual conference, The Human Insight Summit (THiS) in Austin, TX, October 28-30. What you'll get:

• 3 days of insights-driven product design knowledge
• 3 tracks: Experience research, Insights-driven design, Growth & innovation
• Networking with 500+ innovators from top brands
• Practical ways to leverage UserTesting in your design process

Plus, don't miss the legendary THiS party!
​
Transform your design career with real human insights at THiS—excited to see you there.

News, Tools, and Resources: Designing complex data tables

• ​Learn exactly how Hygraph uses Figma to build complex data tables.
• Stephanie Walter gathered a ton of fantastic resources for designing complex tables for enterprise UXers.
• This guide to responsive accessible tables is an absolute goldmine.
• Building a design system? Check out these great examples of table components.
• Try this table generator plugin on Figma to automate tabular data from a CSV.
• ​Here’s how to design tables to be read, not just looked at.

​

Ask DesignerTom: Dealing with super-wide tables

Question: "How do you handle tables that are just inherently very wide, with lots of columns that users need?" - Louis H.

Answer: Horizontal scrolling should be a last resort. Try these strategies first:

1. Sticky columns: Lock the most important 1-2 columns in place while allowing the rest to scroll.
2. Column grouping: Use tabs or a dropdown to let users switch between logical groups of columns.
3. Responsive priorities: Define which columns show/hide at different screen widths.
4. Alternative views: Offer a "card" or "list" view option for mobile users.
5. Smart defaults: Show crucial columns by default, let users add more.

The goal is to help users find and compare data efficiently. Sometimes that means rethinking how you present information entirely.

UX Tools Job Board

• Notion is looking for a UX Writer to build out its UX Writing practice and team.
• Join the team at Substack as a Product Designer building scalable interviews and flows for a wide range of products.
• Artsy, a startup art marketplace, is seeking a Senior Product Designer to shape the customer experience for its global community of artists and buyers.

What's your biggest pain point when designing data tables? Hit reply and let me know!

Enjoying this newsletter? Let us know here.