From 95254027c45dc7ae99a8c176803edb44ad90daa4 Mon Sep 17 00:00:00 2001 From: CentreMetre Date: Mon, 15 Jun 2026 21:15:34 +0100 Subject: [PATCH] Use a passed HTMLTableCellElement as the cell directly When a cell value is a /, append it to the row as-is instead of wrapping it in a generated , which would have produced invalid nested cells. Any other HTMLElement still gets wrapped as before. --- abstract-table.ts | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/abstract-table.ts b/abstract-table.ts index 7d6f151..7c08e93 100644 --- a/abstract-table.ts +++ b/abstract-table.ts @@ -143,7 +143,8 @@ export abstract class Table { * Creates a row, populated with data, for displaying in the table. * @param data The data in the shape of `TRow`, with values populated. * @return A HTMLTableRowElement that can then be set on a table. - * @remarks If a cell value is an HTMLElement it is appended to the cell. A DOM node can only + * @remarks If a cell value is an HTMLTableCellElement (a ``/``) it is used as the cell + * directly; any other HTMLElement is appended inside a generated ``. A DOM node can only * exist in one place, so passing the same element instance to multiple rows moves it to the * last row only. Pass a fresh element (or `el.cloneNode(true)`) per row. But keep in mind that * el.cloneNode(true) does not keep event listeners, so if event listeners are used it is best @@ -153,14 +154,20 @@ export abstract class Table { const row = document.createElement("tr"); for (const column of this.columns) { - const cell: HTMLTableCellElement = document.createElement("td"); const value = data[column.key] + if (value instanceof HTMLTableCellElement) { + row.append(value); // already a cell, use it as-is + continue; + } + + const cell: HTMLTableCellElement = document.createElement("td"); + // Element values are inserted as children, not stringified. if (value instanceof HTMLElement) { cell.appendChild(value); row.append(cell); - continue; // skip the textContent path that would wipe it + continue; // skip the textContent path that would wipe it } let cellValue = "";