skills.rest
mkusaka
mkusakaCOMMUNITY
Explore all skills by this author →
GitHub

artifact-data-table

Generate interactive sortable and filterable data-tables from JSON arrays.

7|Updated Mar 8, 2026
Search Tags:#interactive#filter#dataset#data-table#sort
One-click install
npx skills add https://github.com/mkusaka/ccskills --skill artifact-data-table
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: artifact-data-table
Source: https://github.com/mkusaka/ccskills/tree/main/skills/artifact-data-table
Command: npx skills add https://github.com/mkusaka/ccskills --skill artifact-data-table

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill addresses the need for creating interactive data-table artifacts that allow users to explore tabular datasets with sorting and filtering capabilities.

Core Features & Use Cases

  • Interactive Data-Table Creation: Build sortable and filterable data-tables for exploring datasets.
  • Data Embedding: Embed data as a JSON array for the renderer to process and display.
  • Use Case: Ideal for creating data-tables for product catalogs, inventory listings, or any scenario where a user needs to browse, sort, or filter rows of data.

Quick Start

Use the artifact-data-table skill to create a data-table artifact from the 'products.json' file located in the current directory.

Frequently Asked Questions about artifact-data-table

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create an interactive data-table for browsing datasets?▼

An interactive data-table is generated by embedding your dataset as a JSON array, which the renderer then processes to display sortable and filterable rows for user exploration.

What JSON format is required for generating sortable and filterable data-tables?▼

Generating sortable and filterable data-tables requires JSON data arrays as input. You must embed your data in this JSON array format so the renderer can process and display the interactive rows correctly.

Can I use this approach to build a filterable product catalog or inventory listing?▼

Yes, this approach is ideal for building filterable product catalogs or inventory listings. It processes JSON data arrays into interactive tables where users can browse, sort, and filter rows of data.

What's the best way to display tabular JSON data for user exploration?▼

The best way to display tabular JSON data for exploration is using an interactive artifact that provides built-in sorting and filtering capabilities, allowing users to manipulate and navigate the dataset rows directly.

Do I need any external dependencies to render interactive data-tables from JSON?▼

No external dependencies are required to render interactive data-tables from JSON. The artifact handles processing the JSON array input and managing the rendering, sorting, and filtering capabilities internally.

Related Skills

Explore More Data & Analytics Skills→
thedaviddiasthedaviddias
228

Data Table

Display, sort, and filter structured data in a tabular format.

Community
Intermediate
promptrankspromptranks

prk-psv-export

Export validated PSV samples to SQL or JSON for database import.

Official
Intermediate
xingBaGanxingBaGan

d3-viz

Create interactive data visualizations with d3.js and SVG.

Community
Advanced
ntaksh42ntaksh42
1

markdown-table-generator

Generate Markdown tables from CSV, JSON, and arrays with alignment options.

Community
Basic