Skip to content

Commit 7e616e3

Browse files
author
Marko Petzold
committed
feat: update package configuration and migrate to Vite
- Added Node and npm engine requirements in package.json. - Updated build and watch scripts to use Vite instead of Rollup. - Removed Rollup configuration file as Vite is now used for building. - Updated dependencies, including upgrading 'lit' and adding 'tslib'. - Introduced new peer dependency for '@vaadin/grid'. - Modified default-data.json to include new styling options and updated column widths. - Enhanced definition schema to support new properties for horizontal overflow and cell padding. - Refactored widget-table.ts to integrate Vaadin Grid for rendering. - Added Vite configuration file for development and build setup. - Removed old web-dev-server configuration in favor of Vite.
1 parent 5cf6022 commit 7e616e3

File tree

12 files changed

+1835
-8824
lines changed

12 files changed

+1835
-8824
lines changed

‎.github/workflows/build-publish.yml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ name: Build and Publish to npm and unpkg
33
on:
44
push:
55
tags:
6-
- '*'
6+
- "*"
77

88
jobs:
99
build:
@@ -16,7 +16,7 @@ jobs:
1616
- name: Install Node.js
1717
uses: actions/setup-node@v4
1818
with:
19-
node-version: '18'
19+
node-version: "24"
2020

2121
- name: Install dependencies
2222
run: npm install --omit-dev --frozen-lockfile

‎README.md‎

Lines changed: 97 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1,104 +1,135 @@
11
# \<widget-table>
22

3-
This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.
3+
A Lit 3.x web component for rendering data tables with sortable columns, powered by Vaadin Grid. Part of the IronFlock widget ecosystem.
4+
5+
![screenshot](thumbnail.png)
46

57
## Installation
68

79
```bash
8-
npm i widget-table
10+
npm i @record-evolution/widget-table
911
```
1012

13+
**Peer Dependencies:** This widget requires `@vaadin/grid` to be installed in your application.
14+
1115
## Usage
1216

1317
```html
1418
<script type="module">
15-
import 'widget-table/widget-table.js';
19+
import '@record-evolution/widget-table'
1620
</script>
1721

18-
<widget-table></widget-table>
22+
<widget-table-1.2.0></widget-table-1.2.0>
1923
```
2024

21-
## Expected data format
22-
23-
The following format represents the available data :
24-
```js
25-
data: {
26-
settings: {
27-
title: string,
28-
subTitle: string,
29-
minGauge: number,
30-
maxGauge: number,
31-
style: {
32-
needleColor: string,
33-
sections: number,
34-
backgroundColor: string[]
35-
}
36-
}
37-
gaugeValue: Number
25+
```javascript
26+
const table = document.querySelector('widget-table-1.2.0')
27+
table.inputData = {
28+
title: 'Device Status',
29+
subTitle: 'Current readings',
30+
columns: [
31+
{
32+
header: 'Device',
33+
type: 'string',
34+
values: [{ value: 'Sensor A' }, { value: 'Sensor B' }]
35+
},
36+
{
37+
header: 'Status',
38+
type: 'state',
39+
values: [{ value: 'ONLINE' }, { value: 'OFFLINE' }],
40+
styling: { stateMap: "'ONLINE': 'green', 'OFFLINE': 'red'" }
41+
},
42+
{
43+
header: 'Temperature',
44+
type: 'number',
45+
values: [{ value: '23.456' }, { value: '18.912' }],
46+
styling: { precision: 1 }
47+
}
48+
]
3849
}
3950
```
4051

41-
## Interfaces
52+
## InputData Interface
4253

4354
```ts
44-
interface InputData {
45-
settings: Settings
46-
gaugeValue: number
47-
}
48-
```
49-
```ts
50-
interface Settings {
51-
title: string,
52-
subTitle: string,
53-
minGauge: number,
54-
maxGauge: number,
55-
style: Style
56-
}
57-
```
58-
```ts
59-
interface Style {
60-
needleColor: string,
61-
sections: number,
62-
backgroundColor: string[]
63-
}
64-
```
55+
interface InputData {
56+
title?: string
57+
subTitle?: string
58+
horizontalOverflow?: boolean
59+
styling?: {
60+
headerFontSize?: string // e.g. '14px'
61+
cellPaddingHorizontal?: string // e.g. '16px' or '1rem'
62+
cellPaddingVertical?: string // e.g. '8px' or '1rem'
63+
}
64+
columns?: Column[]
65+
}
6566

66-
## Style options
67-
The following options are available for styling the value graph.
68-
The `sections` option splits the value area into by default three same sized sections. Therefore three different colors can be provided to the `backgroundColor` by default.
69-
```
70-
interface Style {
71-
needleColor: string,
72-
sections: number,
73-
backgroundColor: string[]
74-
}
67+
interface Column {
68+
header: string
69+
type: 'string' | 'number' | 'boolean' | 'state' | 'button' | 'image'
70+
values: { value: string; link?: string }[]
71+
styling?: {
72+
precision?: number // Decimal places for number type
73+
stateMap?: string // e.g. "'ONLINE': 'green', 'OFFLINE': 'red'"
74+
width?: string // Column width e.g. '150px'
75+
fontSize?: string
76+
fontWeight?: string // e.g. '800' for bold
77+
color?: string // Font color
78+
border?: string // e.g. '1px solid red'
79+
}
80+
}
7581
```
7682

77-
## Linting and formatting
83+
## Column Types
7884

79-
To scan the project for linting and formatting errors, run
85+
| Type | Description |
86+
| --------- | --------------------------------------------------- |
87+
| `string` | Plain text display |
88+
| `number` | Numeric value with optional precision formatting |
89+
| `boolean` | Boolean display |
90+
| `state` | Status indicator with colored dot based on stateMap |
91+
| `button` | Clickable button with optional link |
92+
| `image` | Image display with optional link |
8093

81-
```bash
82-
npm run lint
83-
```
94+
## Features
8495

85-
To automatically fix linting and formatting errors, run
96+
- **Sortable columns**: Click headers to sort ascending/descending
97+
- **Resizable columns**: Drag column borders to resize
98+
- **Horizontal overflow**: Enable scrolling for wide tables
99+
- **Theme support**: Integrates with IronFlock theming system
100+
- **State indicators**: Visual status dots with customizable color mapping
86101

87-
```bash
88-
npm run format
89-
```
102+
## Theming
103+
104+
The widget respects CSS custom properties:
90105

106+
- `--re-text-color`: Text color override
107+
- `--re-tile-background-color`: Background color override
91108

92-
## Tooling configs
109+
Pass a theme object for ECharts-style theming:
93110

94-
For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.
111+
```javascript
112+
table.theme = {
113+
theme_name: 'dark',
114+
theme_object: {
115+
/* theme config */
116+
}
117+
}
118+
```
95119

96-
If you customize the configuration a lot, you can consider moving them to individual files.
120+
## Development
121+
122+
```bash
123+
npm run start # Dev server at localhost:8000/demo/
124+
npm run build # Production build to dist/
125+
npm run types # Regenerate types from schema
126+
npm run release # Build, bump version, git push & tag
127+
```
97128

98-
## Local Demo with `web-dev-server`
129+
## Local Demo
99130

100131
```bash
101132
npm start
102133
```
103134

104-
To run a local development server that serves the basic demo located in `demo/index.html`
135+
Serves the demo at `demo/index.html` with sample data.

‎demo/index.html‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -36,11 +36,12 @@
3636
<script type="module">
3737
import { render } from 'lit'
3838
import { html, unsafeStatic } from 'lit/static-html.js'
39-
const packageJson = await fetch('../package.json').then((res) => res.json())
39+
import packageJson from '../package.json'
40+
import '../src/widget-table.ts'
41+
import data from '../src/default-data.json'
42+
import themeObject from './themes/light.json'
43+
4044
const tag = unsafeStatic(`widget-table-${packageJson.version}`)
41-
import '../dist/widget-table.js'
42-
const data = await fetch('../src/default-data.json').then((res) => res.json())
43-
const themeObject = await fetch('themes/light.json').then((res) => res.json())
4445
const theme = { theme_name: 'light', theme_object: themeObject }
4546
render(
4647
html`

0 commit comments

Comments
 (0)