artifact-data-table

name	artifact-data-table
description	Instructions for creating sortable and filterable data-table artifacts from the built-in template
metadata	{"originalName":"Skill: Artifact data table","ccVersion":"2.1.206","sourceUrl":"https://github.com/Piebald-AI/claude-code-system-prompts/blob/main/system-prompts/skill-artifact-data-table.md","source":{"owner":"Piebald-AI","repo":"claude-code-system-prompts","ref":"main","path":"system-prompts/skill-artifact-data-table.md"}}

---

name: artifact-data-table description: Create an interactive data-table artifact — a sortable, filterable table for exploring a tabular dataset. Use when the user wants to browse, sort, or filter rows of data (a CSV, a list of records, query results, a catalog) rather than see it summarized. Keywords — table, list, browse, sort, filter, catalog, records, CSV viewer. Only for CREATING a new artifact; edits to an existing artifact modify its HTML directly.

Interactive table layout: a filter input, a dense sortable table (click a column header to sort), and a row count. Data is embedded as a JSON array; the bundled renderer draws and re-sorts it.

How to use

1. Read template.html from this skill's base directory (listed above).
2. Copy it as your starting point. Replace each <!-- SLOT: ... --> marker with real content — the comment inside each slot describes what goes there. Each slot also carries placeholder text after the comment (sample headings, sample rows, sample values); replace that text too — removing the comment markers alone leaves the placeholders in the published page.
3. Self-check the filled HTML before publishing: no SLOT markers left, no placeholder text left.
4. Publish the filled HTML with the Artifact tool.

Creation only. When editing an existing data-table artifact, work with its current HTML directly — don't re-read or re-apply this template.

Slots

Slot	What to fill in
TITLE	Plain-text page title, e.g. "Product catalog". Appears twice — the <title> element near the top (this is what names the browser tab and the artifact itself) and the visible <h1> in the header. Fill both.
COLUMNS	JSON array of column definitions: {key, label, type}. type is "text" or "num" (right-aligned, numeric sort).
ROWS	JSON array of row objects, each keyed by the column keys. Embed the full dataset — the renderer handles scrolling (size ceiling under Data rules).
FOOTER_NOTE	Data source and generation timestamp.

The template also has a minor inline slot for header scope text — labelled in place.

Data rules

• Values in "num" columns must be JSON numbers, not strings — 1234.5, never "1,234.50" or "$1,234.50". Strip currency symbols and thousands separators; put the unit in the column label (e.g. "Amount (USD)"). A non-numeric value (a string like "$1,234.50", a boolean) in a "num" column is shown as-is but skips number formatting and sorts to the end.
• A missing value is null (or omit the key) — never 0, "N/A", or "-". Empty and whitespace-only strings also count as missing. The renderer shows missing cells blank and sorts them last.
• Dates go in "text" columns formatted ISO-8601 (2026-07-08), so the alphabetical sort is also the chronological one. Human-style dates ("Jul 8, 2026") sort wrong.
• Both JSON blocks must be strict JSON: double quotes, no trailing commas, no comments, no NaN/Infinity.
• Inside JSON string values, escape </ as <\/ and <!-- as <\u0021-- (both are valid JSON and parse back to the original text). Unescaped, </script terminates the script block early — breaking the table and letting the rest of the value render as live HTML — and <!-- opens an HTML comment-like state inside script data with similarly corrupting effects.
• Numbers display with up to 6 decimal places. Pre-round values to the precision worth showing — mixed precision makes right-aligned columns ragged.
• Embed the full dataset up to a few thousand rows. Beyond that, subset or aggregate to what the user will actually browse, and say what was cut in FOOTER_NOTE.

Restyle on top

The template's value is its working mechanics — layout, sorting, filtering. The shipped styling is a clean default (Claude Design System light-palette values), not a final look: when the user's request or the subject matter suggests a different feel, restyle on top of it.

• Safe to restyle: the entire <style> block — colors, the :root palette variables, typography, spacing, striping, radii.
• Keep intact: the table markup structure, the <script> blocks, and the ids and classes the script reads — dt, dt-filter, dt-count, arrow, sorted, num, empty. Renaming or removing these breaks sorting and filtering.

Notes

• The template is a body fragment — no <!DOCTYPE>/<html>/<head>/<body> wrapper. The Artifact tool adds its own skeleton at publish time.
• Data goes in the two JSON <script> blocks, not as literal <tr> markup — the renderer owns row emission so sort and filter work.
• The filter input matches substrings across all text columns; numeric columns are excluded from text filtering. A filter that matches nothing shows a built-in "No rows match" message — don't add your own.
• Tune --accent in the :root block toward the subject matter if a different hue reads better.