From ccf81fa08587bd4550d641c133b4cf9133bd9bb9 Mon Sep 17 00:00:00 2001 From: CentreMetre Date: Sun, 14 Jun 2026 18:43:31 +0100 Subject: [PATCH] Add boolean symbol changing feature --- abstract-table.ts | 38 +++++++++++++++++++++++++++++++++++--- 1 file changed, 35 insertions(+), 3 deletions(-) diff --git a/abstract-table.ts b/abstract-table.ts index 9d0480e..d96d427 100644 --- a/abstract-table.ts +++ b/abstract-table.ts @@ -16,10 +16,14 @@ export abstract class Table { messageEl: HTMLElement | null; + trueSymbol: string; + falseSymbol: string; + + /** * Constructs a table based on the parameters given. * @param exampleObject An instance of the type to be displaying. Can be an object with default/zero values for that type - * such as `0`, `""`, `false` or `true`. E.g. for a user ```{ id: 0; name: ""; }``` would be passed + * such as `0`, `""`, `false` or `true`. E.g. for a user ```{ id: 0; name: ""; }``` would be passed. * @param displayNamesAndOrder A object with the same properties, but all string type for the header cell values. * Used by passing an object with the keys of {@link TRow} and the name preferred. E.g. for a user: * ```{ id: "ID", name: "Name" }```, this makes the columns appear in the order of ID then Name. @@ -27,8 +31,14 @@ export abstract class Table { * Omit (undefined) to use the class provided HTMLParagraphElement. * Pass an HTMLElement to use a custom element. * Pass null to disable automatic message output. + * @param trueSymbol The symbol used for boolean cells that are true. Optional, default "✔". + * @param falseSymbol The symbol used for boolean cells that are false. Optional, default "✖". */ - constructor(exampleObject: TRow, displayNamesAndOrder?: Record, messageElement?: HTMLElement | undefined | null) { + constructor(exampleObject: TRow, + displayNamesAndOrder?: Record, + messageElement?: HTMLElement | undefined | null, + trueSymbol: string = "✔", + falseSymbol: string = "✖") { this.table = document.createElement("table") this.tableBody = document.createElement("tbody"); @@ -40,6 +50,9 @@ export abstract class Table { // If null it means disabled this.messageEl = messageElement === undefined ? document.createElement("p") : messageElement; + + this.trueSymbol = trueSymbol; + this.falseSymbol = falseSymbol; } /** @@ -129,7 +142,7 @@ export abstract class Table { switch (header.type) { case "boolean": cell.classList.add("table-cell-boolean"); - cellValue = value ? "✔" : "✖"; + cellValue = value ? this.trueSymbol : this.falseSymbol; cell.classList.add(value ? "table-cell-boolean-true" : "table-cell-boolean-false"); break; @@ -212,6 +225,25 @@ export abstract class Table { this.clearMessage(); this.appendMessage(message); } + + /** + * Change the symbols for boolean cells on the table. + * @param trueSymbol What the true symbol should be. + * @param falseSymbol What the false symbol should be. + * @param updateExisting Whether to update the existing cells. Default to true. + */ + changeBooleanSymbols(trueSymbol: string, falseSymbol: string, updateExisting: boolean = true) { + this.trueSymbol = trueSymbol; + this.falseSymbol = falseSymbol; + + // Change the symbol on already rendered boolean cells. + if (updateExisting) { + this.tableBody.querySelectorAll(".table-cell-boolean-true") + .forEach(c => c.textContent = trueSymbol); + this.tableBody.querySelectorAll(".table-cell-boolean-false") + .forEach(c => c.textContent = falseSymbol); + } + } } type Header = {