lit-html-table_skill

Overview

This skill shows how to build a Lit web component that converts JSON into a dynamic HTML table. It covers loading JSON from a URL or inline script, styling via CSS custom properties, and an optional editable mode that emits events when cells change. Examples and patterns are practical and ready to drop into a Lit TypeScript project.

How this skill works

The component fetches JSON from a src attribute or reads an inline <script type="application/json"> slot, normalizes the data, and renders a table using Lit templates. Table headers are generated from object keys and can be replaced via named slots. An editable boolean toggles inputs inside table cells and dispatches custom events with updated row data.

When to use it

• You need a lightweight, reusable table component that works in any web page without a heavy framework.
• You want to display remote JSON from an API endpoint as a table quickly.
• You need inline dataset support for static or demo pages using a <script type="application/json"> slot.
• You want editable tables that emit events for integration with forms, state stores, or server updates.
• You prefer styling flexibility via CSS custom properties and slot-based header overrides.

Best practices

• Validate or sanitize incoming JSON before rendering to avoid runtime errors.
• Provide consistent object shapes or normalize keys so table columns remain stable across rows.
• Use CSS custom properties to theme spacing, alignment, and cell appearance instead of hardcoding styles.
• Keep editable mode optional and debounce heavy update handlers to reduce re-renders and network calls.
• Listen for the custom input-cell event to capture edits and persist changes outside the component.

Example use cases

• Admin dashboards that list records from a REST endpoint and allow inline editing of fields.
• Documentation or playground pages showing sample JSON as a readable table without build tooling.
• Prototyping data-driven UI where columns map directly to JSON keys and header labels can be slotted for customization.
• Embedding a small catalog or lookup table in a marketing or product page using inline JSON.
• Capturing cell edits and sending patched data to an API by listening to input-cell events.