CentreMetre/abstract-ts-table
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Change R generic to TRow

Browse Source
This commit is contained in:
CentreMetre
2026-06-14 16:31:45 +01:00
parent 071c5fc08c
commit 59174d3c88
1 changed files with 16 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
abstract-table.ts
View File

@@ -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<R extends Object> {
export abstract class Table<TRow extends Object> {
table: HTMLTableElement;
tableBody: HTMLTableSectionElement;
headers: Header<R>[];
headers: Header<TRow>[];
messageEl: HTMLElement | null;
@@ -28,7 +28,7 @@ export abstract class Table<R extends Object> {
* Pass an HTMLElement to use a custom element.
* Pass null to disable automatic message output.
*/
constructor(exampleObject: R, displayNamesAndOrder?: Record<keyof R, string>, messageElement?: HTMLElement | null | undefined) {
constructor(exampleObject: TRow, displayNamesAndOrder?: Record<keyof TRow, string>, messageElement?: HTMLElement | null | undefined) {
this.table = document.createElement("table")
this.tableBody = document.createElement("tbody");
@@ -44,12 +44,12 @@ export abstract class Table<R extends Object> {
}
createHeadersFromType(
exampleObject: R, // Needed for runtime, since types don't exist in JS.
displayNamesAndOrder?: Record<keyof R, string>
): Header<R>[] {
exampleObject: TRow, // Needed for runtime, since types don't exist in JS.
displayNamesAndOrder?: Record<keyof TRow, string>
): Header<TRow>[] {
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<R extends Object> {
* 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<R extends Object> {
* @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<R extends Object> {
/**
* 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.")