Rename Header type to Column

Rename the Header type to Column and update all references: the columns
field, the createColumnsFromType method, and the per-column loop
variables, so the naming reflects that each object describes a column.

abstract-table.ts

@@ -36,7 +36,7 @@ export abstract class Table<TRow extends object> {
 
     table: HTMLTableElement;
     tableBody: HTMLTableSectionElement;
-    headers: Header<TRow>[];
+    columns: Column<TRow>[];
 
     messageEl: HTMLElement | null;
 
@@ -55,7 +55,7 @@ export abstract class Table<TRow extends object> {
         this.table = document.createElement("table")
         this.tableBody = document.createElement("tbody");
 
-        this.headers = this.createHeadersFromType(exampleObject, options.displayNamesAndOrder);
+        this.columns = this.createColumnsFromType(exampleObject, options.displayNamesAndOrder);
         this.setHeaderRow();
 
         this.table.appendChild(this.tableBody);
@@ -68,17 +68,17 @@ export abstract class Table<TRow extends object> {
     }
 
     /**
-     * Creates a list of {@link Header} objects to be used in a table for the header cell values, column types, and header/column order (if provided, otherwise inferred).
+     * Creates a list of {@link Column} objects to be used in a table for the header cell values, column types, and column order (if provided, otherwise inferred).
      * @param exampleObject An example object of TRow, e.g. User = { id: 0, name: "Name"}. Used to store the types for each column.
-     * @param displayNamesAndOrder The order and names of the columns on the table. 
+     * @param displayNamesAndOrder The order and names of the columns on the table.
-     * e.g. User = { fullname: "Full Name", id: "User ID" }, the headers would be "Full Name" and "User ID" in column order and headers, 
+     * 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 Header} type shape that holds the header/column info. 
+     * @return An array of {@link Column} type shape that holds the column info.
      */
-    createHeadersFromType(
+    createColumnsFromType(
         exampleObject: TRow, // Needed for runtime, since types don't exist in JS.
         displayNamesAndOrder?: Record<keyof TRow, string>
-    ): Header<TRow>[] {
+    ): Column<TRow>[] {
-        // Checks if display names and order was passed. If not, derives the keys to use for the header from the example object.
+        // Checks if display names and order was passed. If not, derives the keys to use for the columns from the example object.
         const keys = displayNamesAndOrder
             ? (Object.keys(displayNamesAndOrder) as (keyof TRow)[])
             : (Object.keys(exampleObject) as (keyof TRow)[]);
@@ -91,15 +91,15 @@ export abstract class Table<TRow extends object> {
     }
 
     /**
-     * Sets the header values on the header row from the {@link headers} object on this object.
+     * Sets the header cell values on the header row from the {@link columns} on this object.
      */
     setHeaderRow() {
         const thead = document.createElement("thead");
         const headerRow = document.createElement("tr");
 
-        for (const header of this.headers) {
+        for (const column of this.columns) {
             const th = document.createElement("th")
-            th.textContent = header.value;
+            th.textContent = column.value;
             headerRow.appendChild(th);
         }
 
@@ -145,13 +145,13 @@ export abstract class Table<TRow extends object> {
     createPopulatedRow(data: TRow): HTMLTableRowElement {
         const row = document.createElement("tr");
 
-        for (const header of this.headers) {
+        for (const column of this.columns) {
             const cell: HTMLTableCellElement = document.createElement("td");
-            const value = data[header.key]
+            const value = data[column.key]
 
             let cellValue = "";
 
-            switch (header.type) {
+            switch (column.type) {
                 case "boolean":
                     cell.classList.add("table-cell-boolean");
                     cellValue = value ? this.trueSymbol : this.falseSymbol;
@@ -259,7 +259,7 @@ export abstract class Table<TRow extends object> {
     }
 }
 
-type Header<TRow> = {
+export type Column<TRow> = {
     key: keyof TRow; // The name of the field.
     value: string; // The name of the header cell
     type: string; // The type of the field, can be string since typesof are returned as strings.