diff --git a/abstract-table.ts b/abstract-table.ts index 7e1d71c..8619f37 100644 --- a/abstract-table.ts +++ b/abstract-table.ts @@ -36,7 +36,7 @@ export abstract class Table { table: HTMLTableElement; tableBody: HTMLTableSectionElement; - headers: Header[]; + columns: Column[]; messageEl: HTMLElement | null; @@ -55,7 +55,7 @@ export abstract class Table { 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 { } /** - * 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. - * e.g. User = { fullname: "Full Name", id: "User ID" }, the headers would be "Full Name" and "User ID" in column order and headers, - * @return An array of {@link Header} type shape that holds the header/column info. + * @param displayNamesAndOrder The order and names of the columns on the 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. */ - createHeadersFromType( + createColumnsFromType( exampleObject: TRow, // Needed for runtime, since types don't exist in JS. displayNamesAndOrder?: Record - ): Header[] { - // Checks if display names and order was passed. If not, derives the keys to use for the header from the example object. + ): Column[] { + // 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 { } /** - * 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 { 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 { } } -type Header = { +export type Column = { 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.