https://github.com/recordevolution/widget-table
Show a table or card display of the data
https://github.com/recordevolution/widget-table
dashboard-widget
Last synced: 3 months ago
JSON representation
Show a table or card display of the data
- Host: GitHub
- URL: https://github.com/recordevolution/widget-table
- Owner: RecordEvolution
- Created: 2023-11-11T12:02:11.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2026-01-16T20:35:03.000Z (3 months ago)
- Last Synced: 2026-01-17T09:14:17.053Z (3 months ago)
- Topics: dashboard-widget
- Language: TypeScript
- Size: 2.16 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# \
A Lit 3.x web component for rendering data tables with sortable columns, powered by Vaadin Grid. Part of the IronFlock widget ecosystem.
## Installation
```bash
npm i @record-evolution/widget-table
```
**Peer Dependencies:** This widget requires `@vaadin/grid` to be installed in your application.
## Usage
```html
import '@record-evolution/widget-table'
```
```javascript
const table = document.querySelector('widget-table-1.2.0')
table.inputData = {
title: 'Device Status',
subTitle: 'Current readings',
columns: [
{
header: 'Device',
type: 'string',
values: [{ value: 'Sensor A' }, { value: 'Sensor B' }]
},
{
header: 'Status',
type: 'state',
values: [{ value: 'ONLINE' }, { value: 'OFFLINE' }],
styling: { stateMap: "'ONLINE': 'green', 'OFFLINE': 'red'" }
},
{
header: 'Temperature',
type: 'number',
values: [{ value: '23.456' }, { value: '18.912' }],
styling: { precision: 1 }
}
]
}
```
## InputData Interface
```ts
interface InputData {
title?: string
subTitle?: string
horizontalOverflow?: boolean
styling?: {
headerFontSize?: string // e.g. '14px'
cellPaddingHorizontal?: string // e.g. '16px' or '1rem'
cellPaddingVertical?: string // e.g. '8px' or '1rem'
}
columns?: Column[]
}
interface Column {
header: string
type: 'string' | 'number' | 'boolean' | 'state' | 'button' | 'image'
values: { value: string; link?: string }[]
styling?: {
precision?: number // Decimal places for number type
stateMap?: string // e.g. "'ONLINE': 'green', 'OFFLINE': 'red'"
width?: string // Column width e.g. '150px'
fontSize?: string
fontWeight?: string // e.g. '800' for bold
color?: string // Font color
border?: string // e.g. '1px solid red'
}
}
```
## Column Types
| Type | Description |
| --------- | --------------------------------------------------- |
| `string` | Plain text display |
| `number` | Numeric value with optional precision formatting |
| `boolean` | Boolean display |
| `state` | Status indicator with colored dot based on stateMap |
| `button` | Clickable button with optional link |
| `image` | Image display with optional link |
## Features
- **Sortable columns**: Click headers to sort ascending/descending
- **Resizable columns**: Drag column borders to resize
- **Horizontal overflow**: Enable scrolling for wide tables
- **Theme support**: Integrates with IronFlock theming system
- **State indicators**: Visual status dots with customizable color mapping
## Theming
The widget respects CSS custom properties:
- `--re-text-color`: Text color override
- `--re-tile-background-color`: Background color override
Pass a theme object for ECharts-style theming:
```javascript
table.theme = {
theme_name: 'dark',
theme_object: {
/* theme config */
}
}
```
## Development
```bash
npm run start # Dev server at localhost:8000/demo/
npm run build # Production build to dist/
npm run types # Regenerate types from schema
npm run release # Build, bump version, git push & tag
```
## Local Demo
```bash
npm start
```
Serves the demo at `demo/index.html` with sample data.