Records Tablev1.0.1
Use this Skill to make an infographic.
A data table skill for Claude Fable 5: a short list of people or accounts in a clean, paged Ant Design table, as React source you restyle with tokens.
Picked most often by
Updated Nov 6, 2026
Preview gallery
Similar Skills
View all
What you get
- Records Table as editable source: the antd table component and a usage example with five sample client accounts.
- references/theme.md and antd ConfigProvider tokens for palette, type, radius, icon stroke and motion, set in one place.
- Columns and rows as plain arrays; antd supplies the paging, sorting and sideways scrolling.
Good fit
- Admin and account pages that list a few dozen clients, members or orders.
- Teams already comfortable with Ant Design who want it to match a warm, teal-led page.
- Projects that want a real table library rather than a hand-built table.
Not for
- Products that already follow a design system of their own; this block's palette and type scale would compete with it.
- Anyone wanting a versioned package from npm; you receive source code and keep it up to date yourself.
- Thousands of rows streamed live, or tables that need virtual scrolling.
About this Skill
Records Table is a data table skill for Claude Fable 5 for short lists of clients, members or accounts. You give it the records, one object per row with the same fields, and the columns to show. It hands back an Ant Design Table: plain columns under a light header band, rows that tint softly under the pointer, a small pager that splits the rows six to a page, and sideways scrolling in its own box when the table outgrows the screen. Add a sorter to any column and visitors can sort by it, as antd documents. Rows lacking a unique key get one, so antd keeps them apart. Colors, type and radius follow your theme tokens through antd's ConfigProvider.
How it works
- Say which page gets the block; the agent studies package.json and the framework config, then writes it in the project's own idiom.
- Swap in your own titles and labels; the theme tokens keep sizes and spacing in place.
- Load your own rows; antd keeps the pager, sorting and sideways scrolling working.
- Run scripts/check-blocks.mjs, then view the page at phone width before it goes live.
Checked before delivery
- The rows are drawn by antd's Table, not a hand-built table, so paging and sorting work as antd documents them
- The pager splits the rows once they pass the page size, and a wide table scrolls sideways inside its own box
- scripts/check-blocks.mjs reports no symbol icons, no off-palette blue or violet and no remote files
What you need before you start
- You bring
- The records to list, one object per row with the same fields · The columns to show: a heading and the field each one reads, plus any column the visitor should sort by
- Dependencies
- Ant Design 5 or newer, installed with your project's package manager
- Outside costs
- None
- Last tested
- v1.0.1 — Claude Code / Cursor
User reviews
Loading reviews…
FAQ
What do I give it, and does it need React?
The records, one object per row with the same fields, and the columns to show, including any visitors may sort by. It is written in React; in another framework the agent rebuilds it with that framework's table and keeps the tokens.
Does the block fetch anything online?
No. Fonts, icons and pictures stay as local files, and scripts/check-blocks.mjs flags any src, href or url() pointing at another host.
Can it take on my brand's look?
Yes. references/theme.md lists the colors, corner radius and fonts as tokens, and the table reads the same values through antd's ConfigProvider.