Refactor constructor to an options object

Introduce an exported TableOptions<TRow> type and replace the trailing
positional constructor parameters (displayNamesAndOrder, messageElement,
trueSymbol, falseSymbol) with a single optional options object, so call
sites are order-independent and named.
This commit is contained in:
CentreMetre
2026-06-14 20:41:10 +01:00
parent ccf81fa085
commit 0eb45263a4

View File

@@ -1,3 +1,27 @@
/**
* Optional configuration for a {@link Table}.
* @template TRow The row shape; see {@link Table}.
*/
export type TableOptions<TRow extends object> = {
/**
* 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.
*/
displayNamesAndOrder?: Record<keyof TRow, string>;
/**
* Used to display messages related to data output. Optional.
* Omit (undefined) to use the class provided HTMLParagraphElement.
* Pass an HTMLElement to use a custom element.
* Pass null to disable automatic message output.
*/
messageElement?: HTMLElement | null;
/** The symbol used for boolean cells that are true. Optional, default "✔". */
trueSymbol?: string;
/** The symbol used for boolean cells that are false. Optional, default "✖". */
falseSymbol?: string;
};
/** /**
* @template TRow 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.
* ``` * ```
@@ -24,35 +48,23 @@ export abstract class Table<TRow extends object> {
* Constructs a table based on the parameters given. * 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 * @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. * @param options Optional configuration. See {@link TableOptions}.
* 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.
* @param messageElement Used to display messages related to data output. Optional.
* 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, constructor(exampleObject: TRow, options: TableOptions<TRow> = {}) {
displayNamesAndOrder?: Record<keyof TRow, string>,
messageElement?: HTMLElement | undefined | null,
trueSymbol: string = "✔",
falseSymbol: string = "✖") {
this.table = document.createElement("table") this.table = document.createElement("table")
this.tableBody = document.createElement("tbody"); this.tableBody = document.createElement("tbody");
this.headers = this.createHeadersFromType(exampleObject, displayNamesAndOrder); this.headers = this.createHeadersFromType(exampleObject, options.displayNamesAndOrder);
this.setHeaderRow(); this.setHeaderRow();
this.table.appendChild(this.tableBody); this.table.appendChild(this.tableBody);
// If null it means disabled // If null it means disabled
this.messageEl = messageElement === undefined ? document.createElement("p") : messageElement; this.messageEl = options.messageElement === undefined ? document.createElement("p") : options.messageElement;
this.trueSymbol = trueSymbol; this.trueSymbol = options.trueSymbol ?? "✔";
this.falseSymbol = falseSymbol; this.falseSymbol = options.falseSymbol ?? "✖";
} }
/** /**