# Data Table Design

> Advanced data table patterns, sortable columns, inline editing, and data-dense table design.

- Skill: `dragoon0x/data-table-design` (Agent Skill)
- Install (CLI): `npx skillmds@latest add dragoon0x/data-table-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/dragoon0x/data-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/data-table-design

---


# Advanced Data Table Design

## Column Types
| Type | Alignment | Format |
|------|-----------|--------|
| Text | Left | Natural case |
| Number | Right | Thousand separator, fixed decimals |
| Currency | Right | Symbol + formatted number |
| Date | Left or center | Consistent format, relative when recent |
| Status | Left or center | Badge with color + label |
| Boolean | Center | Checkbox or icon |
| Action | Right | Icon buttons or overflow menu |

## Inline Editing
- Click cell to edit (or pencil icon)
- Show input/select matching the data type
- Save on blur or Enter
- Cancel on Escape
- Visual feedback on save (brief highlight)
- Validate before save

## Performance
- Virtual scrolling for 1000+ rows
- Column virtualization for 20+ columns
- Debounced search and filter
- Server-side pagination for large datasets

## Bulk Actions
- Checkbox column for row selection
- Select all (current page or all results)
- Action bar appears on selection
- Show selected count
- Clear selection button