Data Table

Display structured data in rows and columns

What it solves

Data Tables are structured components that display information in rows and columns, enabling users to scan, compare, analyze, and interact with large datasets efficiently.

When to use

To display structured, tabular data with multiple properties
When users need to compare data across multiple items
To enable sorting, filtering, and searching of datasets
For displaying financial data, inventory, user lists, or analytics
When data relationships are best understood in a grid format
To support bulk actions on multiple items
For export-ready data presentation

When to avoid

For simple lists with minimal properties (use List View instead)
When data has complex hierarchical relationships (consider Tree View)
For content-heavy items (use Card Grid or detailed views)
On small mobile screens without responsive alternatives
When real-time updates are critical (consider live data streams)
For unstructured or narrative content (use Expandable Text)

Implementation workflow

Confirm the pattern matches the problem and constraints before copying the example.
Start from the anatomy and examples in references/pattern.md, then choose the smallest viable variation.
Apply accessibility, performance, and interaction guardrails before layering visual polish.
Use the testing guidance to verify behavior across keyboard, screen reader, responsive, and failure scenarios.

Accessibility guardrails

When to use client-side vs server-side sorting and filtering? Use Client-Side When:

✅ You have fewer than 1,000 rows – Client-side operations are instant and provide better UX for small datasets.
✅ Users need rapid, interactive filtering – Instant feedback without network delays enhances the experience.
✅ The full dataset is already loaded – If all data is present, server trips add unnecessary latency.
✅ You want offline functionality – Client-side operations work without network connectivity.
✅ Complex multi-column sorting is required – Easier to implement sophisticated sort logic locally. Example Use Cases for Client-Side:
Admin dashboards with < 500 records
Settings or configuration tables

Performance guardrails

Target performance metrics for data tables:

Initial render: < 300ms for first 50 rows
Sort operation: < 100ms for 1000 rows
Filter application: < 200ms with debouncing
Scroll performance: 60 FPS with virtual scrolling
Memory usage: < 50MB for 10,000 rows

Common mistakes

Rendering All Rows at Once

The Problem: Loading thousands of DOM nodes simultaneously causes severe performance issues, slow scrolling, and can freeze the browser entirely.

How to Fix It? Implement virtual scrolling to render only visible rows. Use libraries like TanStack Virtual or build custom virtualization that maintains smooth 60 FPS scrolling even with 10,000+ rows.

No Mobile Alternative

The Problem: Forcing users to horizontally scroll through a desktop table on mobile devices creates a frustrating experience and makes data comparison nearly impossible.

How to Fix It? Provide mobile-specific views like Card Grid layouts or stacked key-value pairs. Consider using a sticky first column for essential data when horizontal scrolling is necessary.

Feature Overload

The Problem: Showing all available features (filters, exports, column toggles) at once overwhelms users and clutters the interface, especially for simple data browsing tasks.

How to Fix It? Use progressive disclosure to hide advanced features initially. Start with essential controls (search, sort) and reveal complex features through settings menus or "Advanced" buttons.

Related patterns

For full implementation detail, examples, and testing notes, see references/pattern.md.

Pattern page: https://uxpatterns.dev/patterns/data-display/table

table

Data Table

What it solves

When to use

When to avoid

Implementation workflow

Accessibility guardrails

Performance guardrails

Common mistakes

Rendering All Rows at Once

No Mobile Alternative

Feature Overload

Related patterns

More from thedaviddias/ux-patterns-for-developers

ux-patterns

button

toggle

autocomplete

notification

accordion