data-table-ux-designer

Purpose

Design accessible, high-performance data tables and grids that support massive datasets, dense information architecture, multi-column sorting, column reordering, inline editing, and virtualization.

When to Use

• Building enterprise dashboards, CRM lists, log viewers, or financial data grids.
• Users struggling to find records or complaining about slow rendering with 1,000+ rows.
• Designing responsive table adaptations for mobile and tablet screens.

What to Analyze

1. Information Density: Compact vs Standard vs Comfortable row height toggles.
2. Fixed Elements: Sticky table header (position: sticky) and sticky left identifier / right action columns.
3. Filtering & Facets: Search bar, multi-select tag filters, date range pickers, and active filter pill bar.
4. Column Controls: Visibility toggles, column resizing handles, and drag-and-drop reordering.
5. Performance & Virtualization: Windowed DOM rendering (e.g. TanStack Table / react-window) for 10k+ rows.

Output Format

• Table Component Structure: HTML/React layout with sticky headers and action bar.
• UX Controls Blueprint: Filter bar, bulk actions toolbar, pagination/infinite scroll controls.
• Mobile Responsive Pattern: Card transformation or horizontal scrolling container specification.

Avoid

• Rendering thousands of un-virtualized DOM table rows simultaneously.
• Hiding crucial action buttons behind 3 nested dropdown menus per row.