From consulting-skills
Design clear, scannable data tables that follow established UX conventions for alignment, formatting, and readability. Use this skill when building data tables, grids, list views, dashboards, reports, or any tabular display. Also triggers for: "design this table", "how should I display this data", "table layout", "column alignment", "grid design", "data grid", "table UX", "report table", "spreadsheet layout", "make this table easier to read", or "numeric column formatting". Covers column ordering, alignment rules, number formatting, status indicators, row density, sorting, and responsive behavior. Do NOT use for database schema design, API response design (use api-design), or chart/visualization design.
How this skill is triggered — by the user, by Claude, or both
Slash command
/consulting-skills:data-table-designThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Design data tables that users can scan, compare, and act on quickly. Tables are the most information-dense UI component — small design decisions (column order, alignment, number formatting) compound into large differences in usability. This skill applies established conventions so every table your team builds is consistent and readable.
Design data tables that users can scan, compare, and act on quickly. Tables are the most information-dense UI component — small design decisions (column order, alignment, number formatting) compound into large differences in usability. This skill applies established conventions so every table your team builds is consistent and readable.
Gather from the user (skip what's already provided):
Column order determines what the eye hits first. Follow this priority:
Example column order for an orders table:
| Order # | Customer | Status | Date | Items | Total | Actions |
|---------|----------|--------|------|-------|-------|---------|
↑ ID ↑ Context ↑ Key ↑ Mid ↑ Num ↑ Num ↑ Acts
Alignment is the single most impactful table design decision. Wrong alignment makes numbers unreadable and text jagged.
| Data Type | Alignment | Reason |
|---|---|---|
| Text (names, descriptions) | Left | Natural reading direction; ragged right is expected |
| Numbers (counts, amounts, IDs) | Right | Aligns decimal points and digit places for comparison |
| Currency | Right | Must align decimal points; use consistent decimal places |
| Percentages | Right | Numeric — align for comparison |
| Dates | Left or Right | Left if displayed as text ("Mar 15, 2025"); Right if displayed as numbers ("2025-03-15") |
| Status / Tags | Left or Center | Center if using badges/pills; Left if plain text |
| Boolean (yes/no, checkboxes) | Center | Symmetrical content looks best centered |
| Actions (buttons, icons) | Center or Right | Center for icon buttons; Right for text actions |
Critical rule: Numbers are always right-aligned. This is non-negotiable. Right-aligned numbers let users compare magnitudes by scanning the leading digits. Left-aligned numbers force the eye to count digits to compare 1,234 vs 12,345.
Column headers match their data alignment. If the data is right-aligned, the header is right-aligned. This maintains the visual column axis.
See references/table-formatting.md for the full formatting reference. Key rules:
Numbers:
1,234,567 (not 1234567)4.50, all values show two decimals1.2M, $34K — but show full precision on hover or in detail viewsCurrency:
$1,234.56Percentages:
%, no space: 42.5%Dates:
3 hours ago) for recent items in active workflowsMar 15, 2025) for records and reports<time> element with ISO datetime for accessibilityStatus:
Null / Empty values:
— or – for missing values, not "N/A", empty string, or "null"— vs 0Density. Choose based on data type and audience:
| Density | Row Height | When to Use |
|---|---|---|
| Compact | 32–36px | Data-heavy tables, power users, financial data |
| Default | 40–48px | Most tables, mixed audiences |
| Comfortable | 52–64px | Tables with avatars, multi-line content, or touch targets |
Hover state. Subtle background highlight on hover (background: rgba(0,0,0,0.04) on light, rgba(255,255,255,0.06) on dark). Helps track across wide rows.
Striped rows. Use alternating row backgrounds only for wide tables (6+ columns) where tracking across is difficult. For narrow tables, striped rows add visual noise.
Selection. If rows are selectable, add a checkbox column as the very first column (before the identifier). Use indeterminate state for "some selected" in the header checkbox.
Sorting. Indicate the current sort column and direction with an arrow icon in the header. Default sort should match the user's most common task. Allow multi-column sort for power users, but don't require it.
Tables on small screens require deliberate choices:
Before finalizing, verify:
Deliver one or more of:
npx claudepluginhub baufest/skills --plugin consulting-skillsGuides designing data tables with column alignment, sorting, filtering, pagination, and responsive fallbacks for scannable tabular data.
Guides building/reviewing SaaS data tables with alignment rules, pagination vs infinite scroll, DataTable/IndexTable patterns, column defaults, bulk actions, sorting, filtering, row selection, and responsive table-to-card.
Guides writing column headers, empty cells, truncation, filter/sort labels, and bulk action copy for data tables and design systems.