diff --git a/abstract-table.ts b/abstract-table.ts index f861453..ec21505 100644 --- a/abstract-table.ts +++ b/abstract-table.ts @@ -74,7 +74,7 @@ export abstract class Table { * e.g. User = { fullname: "Full Name", id: "User ID" }, the columns would be "Full Name" and "User ID" in that order, * @return An array of {@link Column} type shape that holds the column info. */ - createColumnsFromType( + protected createColumnsFromType( exampleObject: TRow, // Needed for runtime, since types don't exist in JS. displayNamesAndOrder?: Record ): Column[] { @@ -93,13 +93,13 @@ export abstract class Table { /** * Sets the header cell values on the header row from the {@link columns} on this object. */ - setHeaderRow() { + protected setHeaderRow() { const thead = document.createElement("thead"); const headerRow = document.createElement("tr"); for (const column of this.columns) { const th = document.createElement("th") - th.textContent = column.headerValue; // Header value; + th.textContent = column.headerValue; // Column's header text headerRow.appendChild(th); } @@ -117,6 +117,7 @@ export abstract class Table { /** * Appends one more row to the current rows. * @param data Data to append as a row. + * @remarks An HTMLElement cell value must be a unique node per row, reusing one HTMLElement instance across rows moves it to the last row only. */ appendRow(data: TRow): void { const row = this.createPopulatedRow(data) @@ -124,8 +125,9 @@ export abstract class Table { } /** - * Appends multiple rows to the table, at the end off the table. + * Appends multiple rows to the table, at the end of the table. * @param data The rows to append to the table, in shape of {@link TRow}. + * @remarks An HTMLElement cell value must be a unique node per row, reusing one HTMLElement instance across rows moves it to the last row only. */ appendRows(data: TRow[]): void { if (data.length === 0) { @@ -141,8 +143,13 @@ 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 + * 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 its best + * generate any many needed. */ - createPopulatedRow(data: TRow): HTMLTableRowElement { + protected createPopulatedRow(data: TRow): HTMLTableRowElement { const row = document.createElement("tr"); for (const column of this.columns) { @@ -196,6 +203,7 @@ export abstract class Table { /** * Deletes all current rows and sets a single row to the data in data param. * @param data The data to set the table to. Should be of shape {@link TRow} + * @remarks An HTMLElement cell value must be a unique node per row, reusing one HTMLElement instance across rows moves it to the last row only. */ setSingleRow(data: TRow): void { this.clearRows() @@ -205,6 +213,7 @@ export abstract class Table { /** * Deletes all current rows and sets the rows to the data in data param. * @param data The data to set the table to. Should be of shape {@link TRow} + * @remarks An HTMLElement cell value must be a unique node per row, reusing one HTMLElement instance across rows moves it to the last row only. */ setRows(data: TRow[]): void { this.clearRows() @@ -217,7 +226,7 @@ export abstract class Table { /** * Get the message element for the table. - * @return The HTMLElement thats used for showing messaged. Or null if its not set. + * @return The HTMLElement thats used for showing messages. Or null if its not set. */ getMessageElement(): HTMLElement | null { return this.messageEl;