ux-tables

Design and critique data tables and lists with alignment, sorting, and density rules.

12|2|Updated Jun 22, 2026
One-click install
npx skills add https://github.com/Uxcel-Lab/product-skills --skill ux-tables-uxcel-lab
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ux-tables
Source: https://github.com/Uxcel-Lab/product-skills/tree/main/ux/components/tables
Command: npx skills add https://github.com/Uxcel-Lab/product-skills --skill ux-tables-uxcel-lab

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Data tables and lists often fail at their core job of letting users scan, compare, and act on data, suffering from decoration over data, missing sorting and filtering, and poor density choices. This Skill provides decision rules for designing or reviewing tables and lists that follow practitioner-grade UX judgment. ## Core Features & Use Cases - Alignment and formatting rules: Enforces left-aligned text, right-aligned numbers in tabular figures, and one consistent format per column. - Interaction requirements: Specifies sorting on meaningful columns, hover and selected row states, bulk-action checkboxes, and toolbars for search, filter, and export. - Context-dependent guidance: Surfaces trade-offs for row density, pagination vs. infinite scroll, zebra striping, and column customization rather than auto-applying them. - Use Case: When asked to design an admin dashboard table showing thousands of orders, the Skill gates on data volume and user tasks, then produces a sortable, paginated table with proper alignment and hands off to accessibility and heuristics audits. ## Quick Start Ask the assistant to design or review a data table for your admin dashboard using the ux-tables skill.

Frequently Asked Questions about ux-tables

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I design a data table that users can actually scan?▼

Left-align text, right-align numbers in tabular figures, keep one consistent format per column, and use minimal borders. Add sorting on meaningful columns plus hover and selected row states so users keep their place while scanning.

When should I use a table vs a list in UI design?▼

Use a table for multi-attribute comparison across columns and a list when items are scanned linearly, like emails or settings. Lists are also easier for screen-reader users, so simple-table content often reads better as a list.

Should I use pagination or infinite scroll for large tables?▼

Use pagination with an items-per-page control for data work where users must refind or cite rows, such as reports. Reserve infinite scroll for leisure feeds, and use a manual Load more button as a middle ground for browsing.

What row height should I use for dense data tables?▼

Use condensed 40px rows for ops tools where seeing everything at once matters, regular 48px as the default, and relaxed 56px for consumer-facing comfort. Avoid cramped rows for casual reading since they cause strain.

Why are merged cells and multi-level headers bad in tables?▼

Complex table structures with merged cells and double-decker headers break screen-reader navigation and increase cognitive load. Split complex tables into simple ones with a single header level and real semantic markup like th elements with scope.