Skip to content

Commit 3c7e512

Browse files
author
Marko Petzold
committed
feat: update widget-table version and enhance data structure for improved rendering
1 parent 475706c commit 3c7e512

File tree

5 files changed

+88
-35
lines changed

5 files changed

+88
-35
lines changed

‎demo/index.html‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -32,15 +32,16 @@
3232
const theme = { theme_name: 'vintage', theme_object: themeObject }
3333
render(
3434
html`
35-
<widget-table-1.1.5 .theme="${theme}" .inputData=${data}>
35+
<widget-table-1.1.6 .theme="${theme}" .inputData=${data}>
3636
web component is not registered. Make sure to use the tag with the correct version
3737
string from the package.json
38-
</widget-table-1.1.5>
38+
</widget-table-1.1.6>
3939
`,
4040
document.getElementById('demo')
4141
)
4242
const widget = document.getElementById('demo').children[0]
43-
const keyPathsToRandomize = ['table.rows.0.1', 'table.rows.1.1', 'settings.title']
43+
console.log('data', data)
44+
const keyPathsToRandomize = ['columns.1.values.0.value', 'columns.2.values.0.value']
4445
const inter = setInterval(() => {
4546
const randomizedObj = randomizeObjectValues(data, keyPathsToRandomize)
4647

‎src/default-data.json‎

Lines changed: 49 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,13 @@
77
{
88
"header": "State",
99
"type": "state",
10-
"values": ["ONLINE", "DISCONNECTED", "ONLINE", "ONLINE", "DISCONNECTED"],
10+
"values": [
11+
{ "value": "ONLINE" },
12+
{ "value": "DISCONNECTED" },
13+
{ "value": "ONLINE" },
14+
{ "value": "ONLINE" },
15+
{ "value": "DISCONNECTED" }
16+
],
1117
"styling": {
1218
"stateMap": "'ONLINE', '#6e9a69', 'DISCONNECTED', '#e15656'",
1319
"width": "50px"
@@ -16,7 +22,13 @@
1622
{
1723
"header": "Name",
1824
"type": "string",
19-
"values": ["Royal Fortune", "Mayflower", "Flying King", "Snap Dragon", "Schonerbrigg Asgard"],
25+
"values": [
26+
{ "value": "Royal Fortune" },
27+
{ "value": "Mayflower" },
28+
{ "value": "Flying King" },
29+
{ "value": "Snap Dragon" },
30+
{ "value": "Schonerbrigg Asgard" }
31+
],
2032
"styling": {
2133
"width": "120px",
2234
"fontSize": "16px"
@@ -25,7 +37,7 @@
2537
{
2638
"header": "Distance",
2739
"type": "number",
28-
"values": [80, 20, 30, 40, 50],
40+
"values": [{ "value": 80 }, { "value": 20 }, { "value": 30 }, { "value": 40 }, { "value": 50 }],
2941
"styling": {
3042
"width": "120px",
3143
"fontWeight": 100,
@@ -35,34 +47,55 @@
3547
{
3648
"header": "Active",
3749
"type": "boolean",
38-
"values": [true, false, true, true, false],
50+
"values": [
51+
{ "value": true },
52+
{ "value": false },
53+
{ "value": true },
54+
{ "value": true },
55+
{ "value": false }
56+
],
3957
"styling": {
4058
"width": "20px"
4159
}
4260
},
4361
{
44-
"header": "Image",
62+
"header": "Image Link",
4563
"type": "image",
4664
"values": [
47-
"https://storage.googleapis.com/reswarm-images/mir-200.png",
48-
"https://storage.googleapis.com/reswarm-images/mir-200.png",
49-
"https://storage.googleapis.com/reswarm-images/mir-200.png",
50-
"https://storage.googleapis.com/reswarm-images/mir-200.png",
51-
"https://storage.googleapis.com/reswarm-images/mir-200.png"
65+
{
66+
"value": "https://storage.googleapis.com/reswarm-images/mir-200.png",
67+
"link": "https://storage.googleapis.com/reswarm-images/mir-200.png"
68+
},
69+
{
70+
"value": "https://res.cloudinary.com/dk8bhmsdz/image/upload/v1750163313/estaamic_machine_ohg3zo.png",
71+
"link": "https://res.cloudinary.com/dk8bhmsdz/image/upload/v1750163313/estaamic_machine_ohg3zo.png"
72+
},
73+
{
74+
"value": "https://res.cloudinary.com/dk8bhmsdz/image/upload/v1747230889/samples/ecommerce/shoes.png",
75+
"link": "https://res.cloudinary.com/dk8bhmsdz/image/upload/v1747230889/samples/ecommerce/shoes.png"
76+
},
77+
{
78+
"value": "https://res.cloudinary.com/dk8bhmsdz/image/upload/v1747230897/samples/chair.png",
79+
"link": "https://res.cloudinary.com/dk8bhmsdz/image/upload/v1747230897/samples/chair.png"
80+
},
81+
{
82+
"value": "https://image.made-in-china.com/2f0j00iOETbDBqhRcS/Ja-1-1-Household-Sewing-Machine-for-Embroidery-and-Heavy-Fabrics.webp",
83+
"link": "https://image.made-in-china.com/2f0j00iOETbDBqhRcS/Ja-1-1-Household-Sewing-Machine-for-Embroidery-and-Heavy-Fabrics.webp"
84+
}
5285
],
5386
"styling": {
5487
"width": "120px"
5588
}
5689
},
5790
{
58-
"header": "Button",
91+
"header": "Link",
5992
"type": "button",
6093
"values": [
61-
"https://google.com",
62-
"https://google.com",
63-
"https://google.com",
64-
"https://google.com",
65-
"https://google.com"
94+
{ "value": "Google", "link": "https://google.com" },
95+
{ "value": "IronFlock", "link": "https://www.ironflock.com" },
96+
{ "value": "Haas", "link": "https://www.haascnc.com/index.html" },
97+
{ "value": "Siemens", "link": "https://www.siemens.com/" },
98+
{ "value": "Continental", "link": "https://www.continental.com/" }
6699
],
67100
"styling": {
68101
"width": "120px"

‎src/definition-schema.d.ts‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,13 @@ export type RowHeight = string;
1515
export type RowBorder = string;
1616
export type HeaderLabel = string;
1717
export type DataType = "state" | "string" | "number" | "boolean" | "button" | "image";
18-
export type Values = string[];
18+
export type DisplayValue = string;
19+
export type LinkURL = string;
20+
export type Values = {
21+
value?: DisplayValue;
22+
link?: LinkURL;
23+
[k: string]: unknown;
24+
}[];
1925
/**
2026
* Number of digits after the decimal point.
2127
*/

‎src/definition-schema.json‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,20 @@
7171
"type": "array",
7272
"order": 3,
7373
"items": {
74-
"type": "string"
74+
"properties": {
75+
"value": {
76+
"title": "Display Value",
77+
"type": "string",
78+
"required": true,
79+
"order": 1
80+
},
81+
"link": {
82+
"title": "Link URL",
83+
"type": "string",
84+
"required": false,
85+
"order": 2
86+
}
87+
}
7588
}
7689
},
7790

‎src/widget-table.ts‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { html, css, LitElement, PropertyValues } from 'lit'
22
import { repeat } from 'lit/directives/repeat.js'
33
import { property, state, customElement } from 'lit/decorators.js'
4-
import { InputData } from './definition-schema.js'
4+
import { InputData, Values } from './definition-schema.js'
55

66
type Column = Exclude<InputData['columns'], undefined>[number]
77
type Theme = {
@@ -17,7 +17,7 @@ export class WidgetTable extends LitElement {
1717
theme?: Theme
1818

1919
@state()
20-
rows: any[] = []
20+
rows: Values[] = []
2121

2222
@state() private themeBgColor?: string
2323
@state() private themeTitleColor?: string
@@ -63,26 +63,26 @@ export class WidgetTable extends LitElement {
6363
this.rows = rows
6464
}
6565

66-
renderCell(value: any, i: number) {
66+
renderCell(cell: any, i: number) {
6767
const colDef = this?.inputData?.columns?.[i]
6868

6969
switch (colDef?.type) {
7070
case 'string':
71-
return this.renderString(value, colDef)
71+
return this.renderString(cell.value, colDef)
7272
case 'number':
73-
return this.renderNumber(value, colDef)
73+
return this.renderNumber(cell.value, colDef)
7474
case 'boolean':
75-
return this.renderBoolean(value, colDef)
75+
return this.renderBoolean(cell.value, colDef)
7676
case 'state':
77-
return this.renderState(value, colDef)
77+
return this.renderState(cell.value, colDef)
7878
case 'button':
79-
return this.renderButton(value, colDef)
79+
return this.renderButton(cell, colDef)
8080
case 'image':
81-
return this.renderImage(value, colDef)
81+
return this.renderImage(cell, colDef)
8282
}
8383
}
8484

85-
renderString(value: any, colDef: Column) {
85+
renderString(value: string, colDef: Column) {
8686
return html`${value}`
8787
}
8888

@@ -106,12 +106,12 @@ export class WidgetTable extends LitElement {
106106
return html`<div class="statusbox" style="background-color: ${stateMap[value]}"></div>`
107107
}
108108

109-
renderButton(value: any, colDef: Column) {
110-
return html`<a href="${value}" target="_blank">${colDef.header}</a>`
109+
renderButton(cell: Values[number], colDef: Column) {
110+
return html`<a href="${cell?.link ?? ''}" target="_blank">${cell.value ?? ''}</a>`
111111
}
112112

113-
renderImage(value: any, colDef: Column) {
114-
return html`<img src="${value}" />`
113+
renderImage(cell: Values[number], colDef: Column) {
114+
return html`<a href="${cell?.link ?? ''}" target="_blank"><img src="${cell.value ?? ''}" /></a>`
115115
}
116116

117117
getTextAlign(colDef: Column) {

0 commit comments

Comments
 (0)