Skills
.Work. You
Rest

json-to-html-table-with-lit

Community

Dynamic HTML tables from JSON with Lit.

Software Engineering#data visualization#frontend#json#web components#lit#html table
Authorrodydavis
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill simplifies the process of displaying JSON data as interactive HTML tables within web applications, making data visualization straightforward.

Core Features & Use Cases

  • Dynamic Table Generation: Creates HTML tables directly from JSON data, fetched from a URL or provided inline.
  • Customizable Headers: Allows for custom table headers using slots, mapping JSON keys to user-defined labels.
  • Editable Cells: Supports an editable mode where table cells can be modified directly, with changes dispatched as events.
  • Use Case: Displaying product inventory data fetched from an API, allowing users to edit quantities directly in the table.

Quick Start

Create a dynamic HTML table from the JSON data found at 'https://jsonplaceholder.typicode.com/posts'.

Dependency Matrix

Required Modules

None required

Components

scripts

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: json-to-html-table-with-lit
Download link: https://github.com/rodydavis/skills/archive/main.zip#json-to-html-table-with-lit

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.