# Table Design

> Data table patterns, sorting, filtering, pagination, responsive tables, and information-dense displays.

- Skill: `dragoon0x/table-design` (Agent Skill)
- Install (CLI): `npx skillmds@latest add dragoon0x/table-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/dragoon0x/table-design/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: dragoon0x (https://skillmd.com/u/dragoon0x)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/dragoon0x/table-design

---


# Table Design

## Table Fundamentals

### Column Design
- Left-align text columns. Right-align number columns. Center status indicators.
- Column headers: bold, slightly smaller, uppercase or gray text.
- Sortable columns: show sort indicator. Default sort by most useful column.
- Minimum column width: ensure content doesn't truncate to unreadable lengths.

### Row Design
- Alternate row shading (zebra stripes) for wide tables. Skip for narrow tables.
- Row height: 48-56px for comfortable reading. 36-40px for dense/power-user views.
- Hover state on rows when clickable. No hover state on non-interactive tables.
- Selected state: subtle background highlight + checkbox.

### Pagination vs Infinite Scroll
| Use Pagination | Use Infinite Scroll |
|---------------|-------------------|
| When users search for specific items | When users browse/discover |
| Data tables and results | Social feeds and galleries |
| When URL state matters | When position doesn't matter |

### Responsive Tables
- Under 768px: convert rows to cards. Each card shows one row's data.
- Or: horizontal scroll with first column frozen.
- Never: shrink text to fit. Never: hide columns without user control.
- Priority columns: let users choose which columns to show.

### Filtering
- Filters above the table, not in a sidebar (unless 5+ filter types).
- Show active filter count. One-click to clear all filters.
- Instant filtering (no "Apply" button) for small datasets.