@peter.prib/renderengine 0.7.0 → 0.9.0

package/src/charting/charts/TableChart.js

@@ -0,0 +1,98 @@
+import { Chart } from '../Chart.js';
+import { ChartBox, ChartLabels } from '../ChartBox.js';
+
+/**
+ * TableChart — rows of values as a table: a header row of column names, then one row per record,
+ * numeric columns right-aligned. Drawn with the renderer's primitives like every chart, so it works
+ * under SVG and canvas and needs no DOM table. Values are shown exactly (not an axis's "1.20k"):
+ * a table is where a reader goes for the actual number.
+ */
+export class TableChart extends Chart {
+    static chartType = 'table';
+
+    /** Layout constants for the rows. */
+    static ROW_H = 26;
+    static PAD_X = 8;
+    static HEADER_FILL = '#eef1f6';
+    static STRIPE_FILL = '#f8f9fb';
+    static RULE = { color: '#d9dde4', width: 1 };
+
+    /**
+     * The columns to show: `options.columns` (names, or `{ key, label?, align? }`), else every key of
+     * the first row. A column is right-aligned when every value it holds is a number (or null).
+     */
+    static columns(data, given) {
+        const specs = (given ?? Object.keys(data[0] ?? {})).map(c => (typeof c === 'string' ? { key: c } : { ...c }));
+        return specs.map(c => ({
+            key: c.key,
+            label: c.label ?? c.key,
+            align: c.align ?? (data.length > 0 && data.every(r => r[c.key] == null || typeof r[c.key] === 'number') ? 'end' : 'start'),
+        }));
+    }
+
+    /** The table has no axes, so none of a chart's axis margins: an edge all round, and room for a title. */
+    static margins(title) {
+        return { left: 8, right: 8, top: title ? 50 : 8, bottom: 8 };
+    }
+
+    /**
+     * The height a table of `rowCount` rows needs — header, rows (at most `maxRows`), the "more rows"
+     * line, a title and the edges — so a page can size its container to fit before drawing.
+     */
+    static heightFor(rowCount, { title, maxRows = Infinity } = {}) {
+        const shown = Math.min(rowCount, maxRows);
+        const more = rowCount > shown ? 1 : 0;
+        const { top, bottom } = TableChart.margins(title);
+        return top + (1 + shown + more) * TableChart.ROW_H + bottom;
+    }
+
+    /** A cell's text: a number exactly (to at most 4 decimals), null/undefined as `nullText`. */
+    static cellText(value, nullText = '—') {
+        if (value == null) return nullText;
+        if (typeof value === 'number') return Number.isInteger(value) ? String(value) : String(Number(value.toFixed(4)));
+        if (value instanceof Date) return value.toISOString().slice(0, 10);
+        return String(value);
+    }
+
+    _render() {
+        const data = this.data ?? [];
+        const box = ChartBox.fromRenderer(this.renderer, TableChart.margins(this.options.title));
+        const { x = box.x, y = box.y, width = box.width, title, maxRows = Infinity, nullText = '—' } = this.options;
+        const { ROW_H, PAD_X } = TableChart;
+        const columns = TableChart.columns(data, this.options.columns);
+        const colW = columns.length > 0 ? width / columns.length : width;
+
+        new ChartLabels({ title }).draw(this.renderer, { x, y, width, height: box.height });
+
+        const shown = data.slice(0, maxRows);
+        let top = y;
+        this.renderer.rect(x, top, width, ROW_H, TableChart.HEADER_FILL, null);
+        columns.forEach((c, i) => this._cell(c.label, c, x + i * colW, top, colW, { fontWeight: 'bold', fill: '#333' }));
+        top += ROW_H;
+        this._rule(x, top, width);
+
+        shown.forEach((row, r) => {
+            if (r % 2 === 1) this.renderer.rect(x, top, width, ROW_H, TableChart.STRIPE_FILL, null);
+            columns.forEach((c, i) => this._cell(TableChart.cellText(row[c.key], nullText), c, x + i * colW, top, colW, { fill: '#222' }));
+            top += ROW_H;
+            this._rule(x, top, width);
+        });
+
+        if (data.length > shown.length) {
+            this.renderer.text(`${data.length - shown.length} more row(s) not shown`, x + PAD_X, top + ROW_H / 2, {
+                textAnchor: 'start', verticalAlign: 'middle', fontSize: '11px', fill: '#888',
+            });
+        }
+    }
+
+    _cell(text, column, left, top, colW, attrs) {
+        const end = column.align === 'end';
+        return this.renderer.text(text, end ? left + colW - TableChart.PAD_X : left + TableChart.PAD_X, top + TableChart.ROW_H / 2, {
+            textAnchor: end ? 'end' : 'start', verticalAlign: 'middle', fontSize: '12px', ...attrs,
+        });
+    }
+
+    _rule(x, y, width) {
+        this.renderer.path(`M${x},${y} L${x + width},${y}`, 'none', TableChart.RULE);
+    }
+}

package/src/charting/table/TableView.js

@@ -0,0 +1,263 @@
+import { ChartChooser } from '../ChartChooser.js';
+
+/**
+ * TableView — the state of an interactive table over result rows, kept apart from drawing so all of
+ * it can be tested without a DOM: the sort, the filters, the hidden columns and the page, and the
+ * menus a table offers on a cell, a row, a column and the table itself (as PopupMenu item specs).
+ *
+ * Filtering is by choosing values from the table, not typing: a cell's menu keeps or excludes rows
+ * with its value (and, for a number, rows above or below it); a column's menu filters to one of its
+ * values. The table's menu offers "Show as", the chart types ChartChooser says fit what is showing.
+ *
+ * Every change calls `onChange(view)`; the host redraws. A host adds its own items with
+ * `menus: { cell(ctx), row(ctx), column(ctx), table(ctx) }`, each returning PopupMenu items.
+ */
+const FILTER_OPS = {
+    '=': (v, x) => v === x,
+    '!=': (v, x) => v !== x,
+    '>': (v, x) => v != null && v > x,
+    '<': (v, x) => v != null && v < x,
+    'is null': (v) => v == null,
+    'is not null': (v) => v != null,
+};
+
+/** Order of two values for a sort: numbers numerically, everything else as text; nulls last. */
+function compareValues(a, b) {
+    if (a == null) return b == null ? 0 : 1;
+    if (b == null) return -1;
+    if (typeof a === 'number' && typeof b === 'number') return a - b;
+    const x = String(a), y = String(b);
+    return x < y ? -1 : x > y ? 1 : 0;
+}
+
+/** A value as copied text: null as empty, an object as JSON. */
+function plain(value) {
+    if (value == null) return '';
+    if (value instanceof Date) return value.toISOString();
+    return typeof value === 'object' ? JSON.stringify(value) : String(value);
+}
+
+export class TableView {
+    /** The most distinct values a column's "Filter to" menu lists. */
+    static MAX_FILTER_VALUES = 20;
+
+    /**
+     * @param {Array<object>} rows
+     * @param {object} [options]
+     * @param {Array<{name, kind?, measure?}>} [options.columns] hints, as ChartChooser takes them
+     * @param {boolean} [options.complete] false when the rows are only part of the answer (a top N)
+     * @param {number} [options.pageSize] rows per page (50; Infinity for all)
+     * @param {function} [options.onChange] called with the view after every change
+     * @param {object} [options.menus] the host's own items: { cell, row, column, table } → items
+     * @param {function} [options.copy] writes text to the clipboard (navigator.clipboard by default)
+     * @param {ChartChooser} [options.chooser]
+     */
+    constructor(rows, { columns = null, complete = true, pageSize = 50, onChange = null, menus = {}, copy = null, chooser = null } = {}) {
+        this.rows = rows;
+        this.columns = ChartChooser.describe(rows, columns);
+        this.complete = complete;
+        this.pageSize = pageSize;
+        this.onChange = onChange;
+        this.menus = menus;
+        this.copy = copy ?? TableView.clipboard;
+        this.chooser = chooser ?? new ChartChooser();
+        this.sort = null;            // { column, direction: 'asc' | 'desc' }
+        this.filters = [];           // { column, op, value }
+        this.hidden = new Set();
+        this.page = 0;
+    }
+
+    static clipboard(text) {
+        return globalThis.navigator?.clipboard?.writeText(text);
+    }
+
+    // ── What is showing ───────────────────────────────────────────────────────
+
+    visibleColumns() { return this.columns.filter(c => !this.hidden.has(c.name)); }
+
+    filtered() {
+        return this.filters.length === 0 ? this.rows
+            : this.rows.filter(r => this.filters.every(f => FILTER_OPS[f.op](r[f.column], f.value)));
+    }
+
+    /** The filtered rows in sort order (a copy; equal values keep their order). */
+    ordered() {
+        const rows = this.filtered();
+        if (this.sort === null) return rows;
+        const { column, direction } = this.sort;
+        const sign = direction === 'desc' ? -1 : 1;
+        // Nulls stay last whichever way: a reader looks for values, not for blanks.
+        return [...rows].sort((a, b) => (a[column] == null || b[column] == null ? compareValues(a[column], b[column]) : sign * compareValues(a[column], b[column])));
+    }
+
+    pageCount() {
+        return Number.isFinite(this.pageSize) ? Math.max(1, Math.ceil(this.filtered().length / this.pageSize)) : 1;
+    }
+
+    /** The rows on the current page, each with its position in the ordered rows (`index`, from 0). */
+    pageRows() {
+        const rows = this.ordered();
+        const start = Number.isFinite(this.pageSize) ? this.page * this.pageSize : 0;
+        const end = Number.isFinite(this.pageSize) ? start + this.pageSize : rows.length;
+        return rows.slice(start, end).map((row, i) => ({ row, index: start + i }));
+    }
+
+    /** "Region = West · Revenue > 100", or '' with no filters. */
+    describeFilters() {
+        return this.filters.map(f => (f.op.startsWith('is') ? `${f.column} ${f.op}` : `${f.column} ${f.op} ${plain(f.value)}`)).join(' · ');
+    }
+
+    // ── Changes ───────────────────────────────────────────────────────────────
+
+    changed() {
+        this.page = Math.min(this.page, this.pageCount() - 1);
+        this.onChange?.(this);
+    }
+
+    /** A header click: unsorted → ascending → descending → unsorted. */
+    toggleSort(column) {
+        const current = this.sort?.column === column ? this.sort.direction : null;
+        this.sortBy(column, current === null ? 'asc' : current === 'asc' ? 'desc' : null);
+    }
+
+    sortBy(column, direction) {
+        this.sort = direction === null ? null : { column, direction };
+        this.page = 0;
+        this.changed();
+    }
+
+    addFilter(column, op, value = null) {
+        if (!Object.hasOwn(FILTER_OPS, op)) throw new Error(`Unknown filter "${op}"`);
+        this.filters = [...this.filters.filter(f => !(f.column === column && f.op === op && f.value === value)), { column, op, value }];
+        this.page = 0;
+        this.changed();
+    }
+
+    removeFilters(column) {
+        this.filters = this.filters.filter(f => f.column !== column);
+        this.changed();
+    }
+
+    clearFilters() {
+        this.filters = [];
+        this.changed();
+    }
+
+    /** Hides a column; the last one showing cannot be hidden. */
+    hide(column) {
+        if (this.visibleColumns().length <= 1) return;
+        this.hidden.add(column);
+        this.changed();
+    }
+
+    showAll() {
+        this.hidden.clear();
+        this.changed();
+    }
+
+    goToPage(page) {
+        this.page = Math.max(0, Math.min(page, this.pageCount() - 1));
+        this.changed();
+    }
+
+    // ── Text out ──────────────────────────────────────────────────────────────
+
+    /** Rows as tab-separated text, header first, the visible columns only. */
+    asTsv(rows = this.ordered()) {
+        const columns = this.visibleColumns().map(c => c.name);
+        const clean = (v) => plain(v).replace(/[\t\r\n]+/g, ' ');
+        return [columns.map(clean).join('\t'), ...rows.map(r => columns.map(c => clean(r[c])).join('\t'))].join('\n');
+    }
+
+    // ── Menus (PopupMenu items) ──────────────────────────────────────────────
+
+    cellMenu(row, column) {
+        const value = row[column];
+        const kind = this.columns.find(c => c.name === column)?.kind;
+        const shown = value == null ? 'empty' : plain(value);
+        const items = value == null
+            ? [{ label: `Only rows where ${column} is empty`, action: () => this.addFilter(column, 'is null') },
+                { label: `Exclude rows where ${column} is empty`, action: () => this.addFilter(column, 'is not null') }]
+            : [{ label: `Only rows where ${column} = ${shown}`, action: () => this.addFilter(column, '=', value) },
+                { label: `Exclude rows where ${column} = ${shown}`, action: () => this.addFilter(column, '!=', value) },
+                ...(kind === 'numeric' ? [
+                    { label: `Only rows where ${column} > ${shown}`, action: () => this.addFilter(column, '>', value) },
+                    { label: `Only rows where ${column} < ${shown}`, action: () => this.addFilter(column, '<', value) },
+                ] : [])];
+        return [
+            ...items,
+            { separator: true },
+            { label: 'Copy value', action: () => this.copy(plain(value)) },
+            ...this.extra('cell', { row, column, value }),
+        ];
+    }
+
+    rowMenu(row) {
+        return [
+            { label: 'Copy row', action: () => this.copy(this.asTsv([row])) },
+            { label: 'Copy row as JSON', action: () => this.copy(JSON.stringify(row)) },
+            ...this.extra('row', { row }),
+        ];
+    }
+
+    columnMenu(column) {
+        const sorted = this.sort?.column === column ? this.sort.direction : null;
+        const values = [...new Set(this.filtered().map(r => r[column]))].sort(compareValues);
+        const listed = values.slice(0, TableView.MAX_FILTER_VALUES);
+        return [
+            { label: 'Sort ascending', checked: sorted === 'asc', action: () => this.sortBy(column, 'asc') },
+            { label: 'Sort descending', checked: sorted === 'desc', action: () => this.sortBy(column, 'desc') },
+            ...(sorted ? [{ label: 'Clear sort', action: () => this.sortBy(column, null) }] : []),
+            { separator: true },
+            {
+                label: 'Filter to',
+                items: [
+                    ...listed.map(v => (v == null
+                        ? { label: '(empty)', action: () => this.addFilter(column, 'is null') }
+                        : { label: plain(v), action: () => this.addFilter(column, '=', v) })),
+                    ...(values.length > listed.length ? [{ label: `${values.length - listed.length} more — filter from a cell`, disabled: true }] : []),
+                ],
+            },
+            ...(this.filters.some(f => f.column === column) ? [{ label: `Clear filters on ${column}`, action: () => this.removeFilters(column) }] : []),
+            { separator: true },
+            { label: 'Hide column', disabled: this.visibleColumns().length <= 1, action: () => this.hide(column) },
+            { label: 'Copy column', action: () => this.copy([column, ...this.ordered().map(r => plain(r[column]))].join('\n')) },
+            ...this.extra('column', { column }),
+        ];
+    }
+
+    /** The table's menu; `onShowAs(choice)` draws a chosen chart (the host's — RenderEngine.resultView). */
+    tableMenu(onShowAs = null) {
+        const choices = onShowAs ? this.chartChoices() : [];
+        return [
+            ...(onShowAs ? [{
+                label: 'Show as',
+                items: choices.length > 0
+                    ? choices.map(c => ({ label: `${c.label} — ${c.reason}`, action: () => onShowAs(c) }))
+                    : [{ label: 'No chart fits these columns', disabled: true }],
+            }, { separator: true }] : []),
+            { label: 'Clear all filters', disabled: this.filters.length === 0, action: () => this.clearFilters() },
+            { label: 'Show hidden columns', disabled: this.hidden.size === 0, action: () => this.showAll() },
+            { label: 'Copy table', action: () => this.copy(this.asTsv()) },
+            ...this.extra('table', {}),
+        ];
+    }
+
+    /**
+     * The chart types that fit what the table is showing — its filtered, sorted rows and visible
+     * columns — as ChartChooser gives them, without the table. Filtered rows are not the whole
+     * answer, so they are never offered as shares of a whole.
+     */
+    chartChoices() {
+        const columns = this.visibleColumns();
+        const names = columns.map(c => c.name);
+        const rows = this.ordered().map(r => Object.fromEntries(names.map(n => [n, r[n]])));
+        return this.chooser.choose(rows, columns, { complete: this.complete && this.filters.length === 0 })
+            .filter(c => c.key !== 'table');
+    }
+
+    extra(kind, context) {
+        const items = this.menus?.[kind]?.({ view: this, ...context }) ?? [];
+        return items.length > 0 ? [{ separator: true }, ...items] : [];
+    }
+}

package/src/charting/table/TableViewChart.js

@@ -0,0 +1,126 @@
+import { TableChart } from '../charts/TableChart.js';
+import { ChartBox, ChartLabels } from '../ChartBox.js';
+import { PopupMenu } from '../PopupMenu.js';
+
+/**
+ * TableViewChart — the interactive table: a TableChart drawn from a TableView's state, whose parts
+ * answer clicks. A header sorts (and its ▾ opens the column's menu); a cell opens the cell's menu; a
+ * row number opens the row's menu; the corner ⋮ opens the table's menu (with "Show as" when the host
+ * can draw a chart); the footer's ‹ › page. Each change goes through the view, whose `onChange`
+ * redraws.
+ *
+ * Interaction needs a renderer whose shapes are DOM elements (SVG: `supportsSceneGraph`); anywhere
+ * else it draws the same table without the clicks.
+ */
+export class TableViewChart extends TableChart {
+    static GUTTER_W = 44;
+    static MENU_GLYPH = '▾';
+    static TABLE_GLYPH = '⋮';
+
+    /**
+     * @param renderer
+     * @param {TableView} view
+     * @param {object} [options] title, nullText; onShowAs(choice) — draws a chart for the table menu's
+     *   "Show as"; showMenu(x, y, items) — opens a menu (PopupMenu.show by default)
+     */
+    constructor(renderer, view, options = {}) {
+        super(renderer, view.rows, options);
+        this.view = view;
+        this.showMenu = options.showMenu ?? ((x, y, items) => PopupMenu.show(x, y, items));
+    }
+
+    /** The height this draws: title, header, the page's rows and the footer. */
+    static heightFor(view, { title } = {}) {
+        const { top, bottom } = TableChart.margins(title);
+        return top + (2 + view.pageRows().length) * TableChart.ROW_H + bottom;
+    }
+
+    _render() {
+        const { view } = this;
+        const { title, nullText = '—' } = this.options;
+        const { ROW_H, PAD_X } = TableChart;
+        const box = ChartBox.fromRenderer(this.renderer, TableChart.margins(title));
+        const interactive = this.renderer.supportsSceneGraph === true;
+        const columns = view.visibleColumns().map(c => ({ key: c.name, label: c.name, align: c.kind === 'numeric' ? 'end' : 'start' }));
+        const gutter = TableViewChart.GUTTER_W;
+        const colW = columns.length > 0 ? (box.width - gutter) / columns.length : box.width - gutter;
+        const x0 = box.x + gutter;
+
+        new ChartLabels({ title }).draw(this.renderer, { x: box.x, y: box.y, width: box.width, height: box.height });
+
+        // Header: the corner (table menu), then a header per column (sort; ▾ column menu).
+        let top = box.y;
+        this.renderer.rect(box.x, top, box.width, ROW_H, TableChart.HEADER_FILL, null);
+        const corner = this.renderer.rect(box.x, top, gutter, ROW_H, TableChart.HEADER_FILL, null);
+        const cornerGlyph = this._text(TableViewChart.TABLE_GLYPH, box.x + gutter / 2, top, { textAnchor: 'middle', fontWeight: 'bold', fill: '#555' });
+        this._on(interactive, [corner, cornerGlyph], (e) => this.showMenu(e.clientX, e.clientY, view.tableMenu(this.options.onShowAs ?? null)), 'Table menu');
+
+        columns.forEach((c, i) => {
+            const left = x0 + i * colW;
+            const sorted = view.sort?.column === c.key ? (view.sort.direction === 'asc' ? ' ▲' : ' ▼') : '';
+            // In words: an arrow-like mark here read as a second sort arrow.
+            const filtered = view.filters.some(f => f.column === c.key) ? ' (filtered)' : '';
+            const head = this.renderer.rect(left, top, colW, ROW_H, TableChart.HEADER_FILL, null);
+            // The label leaves room at the right for the ▾.
+            const label = this._cell(`${c.label}${sorted}${filtered}`, c, left, top, colW - 16, { fontWeight: 'bold', fill: '#333' });
+            this._on(interactive, [head, label], () => view.toggleSort(c.key), 'Sort');
+            const glyph = this._text(TableViewChart.MENU_GLYPH, left + colW - 8, top, { textAnchor: 'middle', fill: '#777' });
+            this._on(interactive, [glyph], (e) => this.showMenu(e.clientX, e.clientY, view.columnMenu(c.key)), `${c.label} menu`);
+        });
+        top += ROW_H;
+        this._rule(box.x, top, box.width);
+
+        // Rows: a number in the gutter (row menu), a cell per column (cell menu).
+        view.pageRows().forEach(({ row, index }, r) => {
+            if (r % 2 === 1) this.renderer.rect(box.x, top, box.width, ROW_H, TableChart.STRIPE_FILL, null);
+            const number = this._text(String(index + 1), box.x + gutter - PAD_X, top, { textAnchor: 'end', fill: '#999', fontSize: '11px' });
+            this._on(interactive, [number], (e) => this.showMenu(e.clientX, e.clientY, view.rowMenu(row)), 'Row menu');
+            columns.forEach((c, i) => {
+                const left = x0 + i * colW;
+                const hit = this.renderer.rect(left, top, colW, ROW_H, 'transparent', null);
+                const text = this._cell(TableChart.cellText(row[c.key], nullText), c, left, top, colW, { fill: row[c.key] == null ? '#999' : '#222' });
+                this._on(interactive, [hit, text], (e) => this.showMenu(e.clientX, e.clientY, view.cellMenu(row, c.key)), null);
+            });
+            top += ROW_H;
+            this._rule(box.x, top, box.width);
+        });
+
+        this._footer(box, top, interactive);
+    }
+
+    /** "1–50 of 120 rows (filtered from 300: Region = West)", and ‹ › when there is more than a page. */
+    _footer(box, top, interactive) {
+        const { view } = this;
+        const shown = view.pageRows();
+        const total = view.filtered().length;
+        const range = shown.length === 0 ? 'No rows' : `${shown[0].index + 1}–${shown.at(-1).index + 1} of ${total} row${total === 1 ? '' : 's'}`;
+        const filters = view.filters.length > 0 ? ` (filtered from ${view.rows.length}: ${view.describeFilters()})` : '';
+        this._text(`${range}${filters}`, box.x + TableChart.PAD_X, top, { textAnchor: 'start', fill: '#666', fontSize: '11px' });
+        if (view.pageCount() > 1) {
+            const right = box.x + box.width - TableChart.PAD_X;
+            const previous = this._text('‹ previous', right - 70, top, { textAnchor: 'end', fill: view.page > 0 ? '#2b5fd9' : '#bbb', fontSize: '11px' });
+            const next = this._text('next ›', right, top, { textAnchor: 'end', fill: view.page < view.pageCount() - 1 ? '#2b5fd9' : '#bbb', fontSize: '11px' });
+            this._on(interactive, [previous], () => view.goToPage(view.page - 1), 'Previous page');
+            this._on(interactive, [next], () => view.goToPage(view.page + 1), 'Next page');
+        }
+    }
+
+    _text(text, x, top, attrs) {
+        return this.renderer.text(text, x, top + TableChart.ROW_H / 2, { verticalAlign: 'middle', fontSize: '12px', ...attrs });
+    }
+
+    /** Wires a click to each element that can take one (SVG); a pointer cursor and a tooltip say so. */
+    _on(interactive, elements, handler, title) {
+        if (!interactive) return;
+        for (const el of elements) {
+            if (typeof el?.addEventListener !== 'function') continue;
+            el.addEventListener('click', (event) => { event.stopPropagation?.(); handler(event); });
+            if (el.style) el.style.cursor = 'pointer';
+            if (title && typeof el.setAttribute === 'function' && el.ownerDocument) {
+                const t = el.ownerDocument.createElementNS('http://www.w3.org/2000/svg', 'title');
+                t.textContent = title;
+                el.appendChild(t);
+            }
+        }
+    }
+}

package/src/index.js

@@ -33,6 +33,10 @@ import { LagPlotChart } from './charting/charts/LagPlotChart.js';
 import { TreemapChart } from './charting/charts/TreemapChart.js';
 import { SunburstChart } from './charting/charts/SunburstChart.js';
 import { OutlineChart } from './charting/charts/OutlineChart.js';
+import { TableChart } from './charting/charts/TableChart.js';
+import { ChartChooser } from './charting/ChartChooser.js';
+import { TableView } from './charting/table/TableView.js';
+import { TableViewChart } from './charting/table/TableViewChart.js';
 import { RadarChart } from './charting/charts/RadarChart.js';
 import { FunnelChart } from './charting/charts/FunnelChart.js';
 import { WaterfallChart } from './charting/charts/WaterfallChart.js';
@@ -215,7 +219,7 @@ import {
 // separate browser-only entry: import 'renderengine/src/workspace.js' directly.
 
 export {
-  Mat4, OrbitCamera, CHART_CATALOG, getChartCatalogEntry, chartRegistry,
+  Mat4, OrbitCamera, CHART_CATALOG, getChartCatalogEntry, chartRegistry, ChartChooser, TableChart, TableView, TableViewChart,
   DIAGRAM_CATALOG, getDiagramCatalogEntry, diagramRegistry,
   TREE_MODE_CATALOG, treeModeRegistry, getTreeModeCatalogEntry,
   AXIS_KIND, ENCODING_CHANNEL, COORD_SYSTEM, COLOR_MODE, CAMERA_MODE,
@@ -1417,6 +1421,80 @@ export class RenderEngine {
         this._renderChart(new FunnelChart(this.renderer, data, options));
     }
 
+    /**
+     * Renders rows as a table — a header of column names, a row per record, numeric columns
+     * right-aligned, values shown exactly. Drawn with the renderer's primitives, so it works under
+     * SVG and canvas. ChartChooser offers it for any result, last.
+     * @param {Array<object>} data one object per row
+     * @param {object} [options]
+     * @param {Array<string|{key:string, label?:string, align?:'start'|'end'}>} [options.columns] every key of the first row when absent
+     * @param {number} [options.maxRows] rows beyond it are counted, not drawn
+     * @param {string} [options.nullText] what a null or missing value shows ('—')
+     * @param {string} [options.title]
+     */
+    tableChart(data, options = {}) {
+        if (!this.renderer) return;
+        this._chart3D = false;
+        this._chartState = { type: 'table', data, options };
+        this._renderChart(new TableChart(this.renderer, data, options));
+    }
+
+    /**
+     * Shows result rows as an interactive table — sort, filter, hide columns, page, copy, through
+     * menus on its cells, rows, columns and the table itself — whose table menu can show what it
+     * holds as any chart type ChartChooser says fits ("Show as"); a chart drawn that way has a
+     * "◂ Table" link back to the table as it was left. One output for a result, table or chart.
+     *
+     * The container's height follows what is drawn (the table's rows, or `chartHeight` for a chart),
+     * so the host gives the container a width only. Interaction needs the SVG renderer; on canvas
+     * the table is drawn without it.
+     * @param {Array<object>} rows
+     * @param {object} [options]
+     * @param {Array<{name, kind?, measure?}>} [options.columns] hints (ChartChooser's)
+     * @param {boolean} [options.complete] false when the rows are only part of the answer
+     * @param {number} [options.pageSize] rows per page (50)
+     * @param {object} [options.menus] the host's own items: { cell, row, column, table } → items
+     * @param {string} [options.title]
+     * @param {number} [options.chartHeight] a chart's height (360)
+     * @param {boolean} [options.fitHeight] size the container to what is drawn (true)
+     * @returns {TableView|null} the table's state, for the host to read or change
+     */
+    resultView(rows, options = {}) {
+        if (!this.renderer) return null;
+        const view = new TableView(rows, { ...options, onChange: () => this._drawResultTable(view, options) });
+        this._drawResultTable(view, options);
+        return view;
+    }
+
+    _drawResultTable(view, options) {
+        this._fitResultHeight(TableViewChart.heightFor(view, options), options);
+        this._chart3D = false;
+        this._chartState = { type: 'table', data: view.rows, options };
+        this._renderChart(new TableViewChart(this.renderer, view, {
+            ...options,
+            onShowAs: (choice) => this._drawResultChart(view, choice, options),
+        }));
+    }
+
+    _drawResultChart(view, choice, options) {
+        this._fitResultHeight(options.chartHeight ?? 360, options);
+        this.renderChartType(choice.key, choice.data, { title: options.title ?? choice.reason });
+        // The way back, drawn over the chart: the same table, as it was left.
+        if (!this.renderer.supportsSceneGraph) return;
+        const back = this.renderer.text('◂ Table', 8, 14, { fill: '#2b5fd9', fontSize: '12px', verticalAlign: 'middle' });
+        back?.addEventListener?.('click', () => this._drawResultTable(view, options));
+        if (back?.style) back.style.cursor = 'pointer';
+    }
+
+    _fitResultHeight(height, options) {
+        if (options.fitHeight === false || !this.container?.style) return;
+        // min-height as well: in a flex layout (a notebook, a workbench pane) a height alone is
+        // shrunk to fit, and the table drawn into the shrunk box lost its last rows.
+        this.container.style.height = `${height}px`;
+        this.container.style.minHeight = `${height}px`;
+        this.fitToContainer();
+    }
+
     /**
      * Renders a waterfall chart — running-total bars, each floating from the
      * previous cumulative value to the new one (a "delta" bar), except