@generative-dom/plugin-rich-table

Interactive rich-table plugin for Generative DOM. Recognizes fenced rich-table blocks in markdown and renders them as the <ce-rich-table> web component with sort, filter, pagination, sticky headers, expandable detail rows, and typed columns (text, num, date, badge, progress, link, inline md, code).

Syntax

```rich-table sort filter paginate=10 sticky-header max-height=400 row-height=compact
| id:num | name:text | status:badge | progress:progress | url:link | notes:md |
|--------|-----------|--------------|-------------------|----------|----------|
| 1 | Alpha | active | 0.62 | https://x/a | *hot* lead |
| 2 | Beta  | paused | 0.20 | https://x/b | on hold   |
> 1: Shipped Q1 2025. See **release notes**.
> 2: Re-open after compliance review.
```

Fence flags

| flag | meaning | |------------------|------------------------------------------------------------| | sort | Click a header to cycle asc → desc → none. | | filter | Inline <input> in each header narrows rows as you type. | | paginate=N | Page size (default 0 = no pagination). | | sticky-header | Pin the header row while the body scrolls. | | max-height=PX | Cap the scroll container height, enabling in-table scroll. | | row-height=... | compact / cozy (default) / comfortable. |

Column types (name:type)

text (default), num, date, badge, progress (0..1 rendered as bar

• %), link (https URLs), md (inline markdown: **bold**, *em*, `code`, links), code (monospace verbatim).

Expandable detail rows

A line > N: … after the body attaches a detail block to 1-indexed row N. Multiple > N: lines concatenate. Inline markdown is supported. Rows with details get a chevron toggle.

Usage

import { GenerativeDom } from '@generative-dom/core';
import { richTable } from '@generative-dom/plugin-rich-table';

const md = new GenerativeDom({
  container: document.getElementById('out')!,
  plugins: [richTable() /* + others */],
});

The plugin's init() auto-registers <ce-rich-table> globally. If you want to use the web component without the plugin (e.g. inside a React app), import it directly:

import { registerRichTable } from '@generative-dom/plugin-rich-table';
registerRichTable();

Token shape

The plugin emits a rich-table token with this payload in meta:

interface RichTablePayload {
  columns: { name: string; type: ColumnType; align: 'left'|'center'|'right'|null }[];
  rows: { cells: string[]; detail?: string }[];
  options: {
    sort: boolean;
    filter: boolean;
    pageSize: number;
    maxHeight: number;
    stickyHeader: boolean;
    rowHeight: 'compact' | 'cozy' | 'comfortable';
  };
}

That payload is JSON-serialized into a <script type="application/json"> child of the <ce-rich-table> host. The web component reads it on connectedCallback and on any DOM mutation (so streaming updates that replace the script re-render the table).

Security

No innerHTML is used for user-derived values outside the Shadow DOM — only controlled, escaped templates inside the web component. Link types reject anything not prefixed with https:// or http://.