Compare commits
4 Commits
67ecf689a6
...
master
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
f5833fcbf8 | ||
|
|
95254027c4 | ||
|
|
436217a8ff | ||
|
|
8c561385b8 |
2
.gitignore
vendored
Normal file
2
.gitignore
vendored
Normal file
@@ -0,0 +1,2 @@
|
|||||||
|
node_modules
|
||||||
|
dist
|
||||||
21
LICENSE
Normal file
21
LICENSE
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
MIT License
|
||||||
|
|
||||||
|
Copyright (c) 2026 Martin McLaren (CentreMetre)
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
of this software and associated documentation files (the "Software"), to deal
|
||||||
|
in the Software without restriction, including without limitation the rights
|
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||||
|
copies of the Software, and to permit persons to whom the Software is
|
||||||
|
furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in all
|
||||||
|
copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||||
|
SOFTWARE.
|
||||||
@@ -4,7 +4,7 @@
|
|||||||
*/
|
*/
|
||||||
export type TableOptions<TRow extends object> = {
|
export type TableOptions<TRow extends object> = {
|
||||||
/**
|
/**
|
||||||
* A object with the same properties, but all string type for the header cell values.
|
* An 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:
|
* 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.
|
* ```{ id: "ID", name: "Name" }```, this makes the columns appear in the order of ID then Name.
|
||||||
*/
|
*/
|
||||||
@@ -23,6 +23,7 @@ export type TableOptions<TRow extends object> = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
* Abstract base class that renders typed row data as an HTML `<table>` on a web page.
|
||||||
* @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.
|
||||||
* ```
|
* ```
|
||||||
* type User = {
|
* type User = {
|
||||||
@@ -143,7 +144,8 @@ export abstract class Table<TRow extends object> {
|
|||||||
* Creates a row, populated with data, for displaying in the table.
|
* Creates a row, populated with data, for displaying in the table.
|
||||||
* @param data The data in the shape of `TRow`, with values populated.
|
* @param data The data in the shape of `TRow`, with values populated.
|
||||||
* @return A HTMLTableRowElement that can then be set on a table.
|
* @return A HTMLTableRowElement that can then be set on a table.
|
||||||
* @remarks If a cell value is an HTMLElement it is appended to the cell. A DOM node can only
|
* @remarks If a cell value is an HTMLTableCellElement (a `<td>`/`<th>`) it is used as the cell
|
||||||
|
* directly; any other HTMLElement is appended inside a generated `<td>`. A DOM node can only
|
||||||
* exist in one place, so passing the same element instance to multiple rows moves it to the
|
* exist in one place, so passing the same element instance to multiple rows moves it to the
|
||||||
* last row only. Pass a fresh element (or `el.cloneNode(true)`) per row. But keep in mind that
|
* last row only. Pass a fresh element (or `el.cloneNode(true)`) per row. But keep in mind that
|
||||||
* el.cloneNode(true) does not keep event listeners, so if event listeners are used it is best
|
* el.cloneNode(true) does not keep event listeners, so if event listeners are used it is best
|
||||||
@@ -153,9 +155,15 @@ export abstract class Table<TRow extends object> {
|
|||||||
const row = document.createElement("tr");
|
const row = document.createElement("tr");
|
||||||
|
|
||||||
for (const column of this.columns) {
|
for (const column of this.columns) {
|
||||||
const cell: HTMLTableCellElement = document.createElement("td");
|
|
||||||
const value = data[column.key]
|
const value = data[column.key]
|
||||||
|
|
||||||
|
if (value instanceof HTMLTableCellElement) {
|
||||||
|
row.append(value); // already a cell, use it as-is
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
const cell: HTMLTableCellElement = document.createElement("td");
|
||||||
|
|
||||||
// Element values are inserted as children, not stringified.
|
// Element values are inserted as children, not stringified.
|
||||||
if (value instanceof HTMLElement) {
|
if (value instanceof HTMLElement) {
|
||||||
cell.appendChild(value);
|
cell.appendChild(value);
|
||||||
@@ -226,7 +234,7 @@ export abstract class Table<TRow extends object> {
|
|||||||
|
|
||||||
/**
|
/**
|
||||||
* Get the message element for the table.
|
* Get the message element for the table.
|
||||||
* @return The HTMLElement that is used for showing messages. Or null if i iss not set.
|
* @return The HTMLElement that is used for showing messages. Or null if it is not set.
|
||||||
*/
|
*/
|
||||||
getMessageElement(): HTMLElement | null {
|
getMessageElement(): HTMLElement | null {
|
||||||
return this.messageEl;
|
return this.messageEl;
|
||||||
|
|||||||
29
package-lock.json
generated
Normal file
29
package-lock.json
generated
Normal file
@@ -0,0 +1,29 @@
|
|||||||
|
{
|
||||||
|
"name": "abstract-ts-table",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"lockfileVersion": 3,
|
||||||
|
"requires": true,
|
||||||
|
"packages": {
|
||||||
|
"": {
|
||||||
|
"name": "abstract-ts-table",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"license": "MIT",
|
||||||
|
"devDependencies": {
|
||||||
|
"typescript": "^6.0.3"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/typescript": {
|
||||||
|
"version": "6.0.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/typescript/-/typescript-6.0.3.tgz",
|
||||||
|
"integrity": "sha512-y2TvuxSZPDyQakkFRPZHKFm+KKVqIisdg9/CZwm9ftvKXLP8NRWj38/ODjNbr43SsoXqNuAisEf1GdCxqWcdBw==",
|
||||||
|
"dev": true,
|
||||||
|
"bin": {
|
||||||
|
"tsc": "bin/tsc",
|
||||||
|
"tsserver": "bin/tsserver"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=14.17"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
22
package.json
Normal file
22
package.json
Normal file
@@ -0,0 +1,22 @@
|
|||||||
|
{
|
||||||
|
"name": "abstract-ts-table",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "A utility class for creating HTML tables.",
|
||||||
|
"type": "module",
|
||||||
|
"main": "dist/abstract-table.js",
|
||||||
|
"types": "dist/abstract-table.d.ts",
|
||||||
|
"files": ["dist"],
|
||||||
|
"scripts": {
|
||||||
|
"test": "echo \"Error: no test specified\" && exit 1",
|
||||||
|
"build": "tsc"
|
||||||
|
},
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "https://git.centremetre.com/CentreMetre/abstract-ts-table"
|
||||||
|
},
|
||||||
|
"author": "CentreMetre",
|
||||||
|
"license": "MIT",
|
||||||
|
"devDependencies": {
|
||||||
|
"typescript": "^6.0.3"
|
||||||
|
}
|
||||||
|
}
|
||||||
12
tsconfig.json
Normal file
12
tsconfig.json
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ES2020",
|
||||||
|
"module": "ESNext",
|
||||||
|
"moduleResolution": "Bundler",
|
||||||
|
"lib": ["ES2020", "DOM"],
|
||||||
|
"declaration": true,
|
||||||
|
"outDir": "dist",
|
||||||
|
"strict": true
|
||||||
|
},
|
||||||
|
"include": ["abstract-table.ts"]
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user