Data table design
Skill Dragoon0x/everything-design-taste/skills/data-table-design
Advanced data table patterns, sortable columns, inline editing, and data-dense table design.From its SKILL.md
npx -y skills add Dragoon0x/everything-design-taste --skill data-table-designAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
One thing to look at
- 9 stars9 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
SKILL.md
1.2 KB, 227 tokens by cl100k_base, as published. Nobody here has run it
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
What ships with it
Read from the repository
Just SKILL.md. No reference files, no scripts.