Add boolean symbol changing feature

abstract-table.ts

@@ -16,10 +16,14 @@ export abstract class Table<TRow extends object> {
 
     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<TRow extends object> {
      * 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<keyof TRow, string>, messageElement?: HTMLElement | undefined | null) {
+    constructor(exampleObject: TRow,
+        displayNamesAndOrder?: Record<keyof TRow, string>,
+        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<TRow extends object> {
 
         // 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<TRow extends object> {
             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<TRow extends object> {
         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<TRow> = {