diff --git a/abstract-table.ts b/abstract-table.ts index e913a6f..cbe7dc3 100644 --- a/abstract-table.ts +++ b/abstract-table.ts @@ -1,5 +1,5 @@ /** - * @template R A type that the shape of a row should be. E.g. + * @template TRow A type that the shape of a row should be. E.g. * ``` * type User = { * id: number; @@ -8,11 +8,11 @@ * ``` * Then `User` would be passed as the generic. */ -export abstract class Table { +export abstract class Table { table: HTMLTableElement; tableBody: HTMLTableSectionElement; - headers: Header[]; + headers: Header[]; messageEl: HTMLElement | null; @@ -28,7 +28,7 @@ export abstract class Table { * Pass an HTMLElement to use a custom element. * Pass null to disable automatic message output. */ - constructor(exampleObject: R, displayNamesAndOrder?: Record, messageElement?: HTMLElement | null | undefined) { + constructor(exampleObject: TRow, displayNamesAndOrder?: Record, messageElement?: HTMLElement | null | undefined) { this.table = document.createElement("table") this.tableBody = document.createElement("tbody"); @@ -44,12 +44,12 @@ export abstract class Table { } createHeadersFromType( - exampleObject: R, // Needed for runtime, since types don't exist in JS. - displayNamesAndOrder?: Record - ): Header[] { + exampleObject: TRow, // Needed for runtime, since types don't exist in JS. + displayNamesAndOrder?: Record + ): Header[] { const keys = displayNamesAndOrder - ? (Object.keys(displayNamesAndOrder) as (keyof R)[]) - : (Object.keys(exampleObject) as (keyof R)[]); + ? (Object.keys(displayNamesAndOrder) as (keyof TRow)[]) + : (Object.keys(exampleObject) as (keyof TRow)[]); return keys.map(key => ({ key, @@ -94,12 +94,12 @@ export abstract class Table { * Appends one more row to the current rows. * @param data Data to append as a row. */ - appendRow(data: R): void { + appendRow(data: TRow): void { const row = this.createPopulatedRow(data) this.tableBody.appendChild(row) } - appendRows(data: R[]): void { + appendRows(data: TRow[]): void { if (data.length === 0) { this.setMessage("No data to append. Empty list provided.") return; @@ -114,7 +114,7 @@ export abstract class Table { * @param data The data in the shape of `R`, with values populated. * @return A HTMLTableRowElement that can then be set on a table. */ - createPopulatedRow(data: R): HTMLTableRowElement { + createPopulatedRow(data: TRow): HTMLTableRowElement { const row = document.createElement("tr"); for (const header of this.headers) { @@ -157,18 +157,18 @@ 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 R} + * @param data The data to set the table to. Should be of shape {@link TRow} */ - setSingleRow(data: R): void { + setSingleRow(data: TRow): void { this.clearRows() this.appendRow(data) } /** * 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 R} + * @param data The data to set the table to. Should be of shape {@link TRow} */ - setRows(data: R[]): void { + setRows(data: TRow[]): void { this.clearRows() if (data.length === 0) { this.setMessage("No data to show. Empty list provided.")