JSON-Tabelle
Zeigt einen Datenpunkt mit JSON-Daten als formatierte Tabelle. Erkennt automatisch ein Array von Objekten, ein Array von Arrays oder ein {headers, rows}-Objekt. Spalten lassen sich umbenennen, ausblenden, sortieren und als Bild, HTML oder Iconify-Icon rendern.
Mögliche Bildquellen (URL, Adapter-Pfad, Datei, Base64): siehe Bildpfade.
Datenpunkt
| Feld | Pflicht | Typ | |
|---|---|---|---|
datapoint | ja | string / array | JSON-Array, Array-von-Arrays oder {headers, rows}; Strings werden geparst |
Einstellungen
Alle Optionen werden im Editor unter Widget bearbeiten gesetzt.
Tabelle
| Option | Standard | |
|---|---|---|
autoHeight | false | Widget-Höhe folgt der Zeilenanzahl — unter Darstellung, siehe Höhe an Inhalt anpassen |
showSearch | false | Suchfeld über der Tabelle |
showHeader | true | Kopfzeile anzeigen |
striped | true | Zebra-Streifen |
fontSize | 12 | Schriftgröße in px |
sortable | false | Klick auf Spaltenkopf sortiert (auf/ab/aus) |
sortRules | – | Sortier-Kette (Button Sortierung), siehe unten |
maxRows | 0 | höchstens so viele Zeilen (0 = alle) |
Sortierung
Kriterien von oben nach unten; das erste entscheidet, die weiteren bei Gleichstand. Mit sortable übernimmt ein Klick auf einen Spaltenkopf die Führung, der dritte Klick kehrt zur Kette zurück.
| Feld | Standard | |
|---|---|---|
column | – | JSON-Schlüssel der Spalte (auch ausgeblendete) |
order | asc | asc / desc |
mode | auto | auto, number, text, active, time (Zeitstempel, ISO, dd.MM.yyyy) |
empty | last | Zeilen ohne Wert: first / last (in beiden Richtungen) |
Kopfzeile
Nur wirksam bei showHeader: true.
| Option | Standard | |
|---|---|---|
headerBg | var(--accent) | Hintergrund der Kopfzeile |
headerColor | #ffffff | Textfarbe der Kopfzeile |
Erste Spalte als Bezeichnung
Hebt die erste Spalte als Label-Spalte hervor.
| Option | Standard | |
|---|---|---|
firstColHeader | false | erste Spalte hervorheben |
firstColBg | var(--app-bg) | Hintergrund der Bezeichnungsspalte |
firstColColor | var(--text-secondary) | Textfarbe der Bezeichnungsspalte |
Spalten
Liste in columns (leer = alle Spalten automatisch aus den JSON-Daten). Pro Spalte:
| Feld | |
|---|---|
key | Schlüssel aus dem JSON |
label | abweichender Anzeigename |
hidden | Spalte ausblenden |
order | Reihenfolge (kleiner = weiter links) |
image | Wert als Bild rendern (URL, data:-URI oder ioBroker-Pfad) |
imageSize | Bildgröße in px |
imagePathPrefix | Pfad-Präfix, überschreibt die globale Admin-URL |
html | Wert als HTML rendern |
htmlWidth | HTML-Breite: auto (eigene Breite) · fill (Spalte füllen) · scale (längster Wert der Spalte füllt, kürzere im gleichen Verhältnis) |
iconify | Iconify-Tokens (z. B. mdi:home) inline als Icon |
width | feste Spaltenbreite in px (leer = automatisch) |
align | Ausrichtung: left · center · right |
wrap | Zeilenumbruch erlauben (sonst einzeilig mit …) |
prefix / suffix | Text vor / hinter dem Wert (z. B. €, °C) |
cellBg / cellColor | Schalter Farben: Hintergrund- / Textfarbe der Datenzellen (Kopfzeile bleibt); überstimmt Bezeichnungsspalte und Zebra-Streifen |
Wert-Format
Zwei Schalter in der Spalte, neben Bild/HTML/Icons: Datum/Zeit und Zahlenformat (Umrechnung, Nachkommastellen und Tausendertrennzeichen in einer Zeile). Jeder blendet seine Felder ein, wenn er an ist. Nur bei Text-Spalten (nicht Bild/HTML); ändert nur die Anzeige, nicht die JSON-Daten. Reihenfolge: Umrechnung → Zeit-Format → Nachkommastellen.
| Feld | |
|---|---|
valueTransform | Umrechnungs-Vorlage (z. B. wh-kwh, s-min) oder custom |
valueFactor / valueOffset | Anzeige = Wert × Faktor + Offset |
valueTimeFormat | Wert als Zeit: relative · time · time-sec · date · date-long · datetime · datetime-sec · custom |
valueTimePattern | Token-Muster bei valueTimeFormat: custom, z. B. dd.MM.yyyy HH:mm |
decimals | Nachkommastellen für Zahlen (leer = unverändert) |
numberFormat | Tausendertrennzeichen: plain · de · en · space · apostrophe (leer = global, greift dann nur mit decimals) |
Zeitstempel in Sekunden und Millisekunden, ISO-Zeitangaben und HH:mm werden automatisch erkannt: 1720562400000 mit valueTimeFormat: date ergibt 10.07.2024.
Zuordnung
Schalter Zuordnung in der Spalte → Zuordnungen bearbeiten öffnet die Liste Wert → Icon / Text / Farbe. Nicht zugeordnete Werte erscheinen unverändert. Nur bei Text-Spalten (nicht Bild/HTML). Oben im Popup: Aus common.states eines Datenpunkts übernehmen (vorbelegt mit dem Tabellen-DP) — vorhandene Einträge behalten Icon und Farbe, neue Werte werden angehängt.
| Eintrag | Zelle |
|---|---|
| Icon, Text leer | nur Icon |
| Icon + Text | Icon und Text |
| nur Text | Text statt Wert |
| nur Farbe | Wert in der Farbe |
| Feld | |
|---|---|
mapValues | Zuordnung an |
valueMap | [{ value, label, icon, color }] — value als Text: "1" trifft 1, "true" trifft true |
Klick auf Zeile
Bereich Verhalten → Klick auf Zeile → Eigene Aktion öffnet pro Zeile ein Popup (HTML-Popup mit allen Feldern als Vorlage, Popup-View, …). Im Popup stehen die Felder der geklickten Zeile bereit, auch ausgeblendete Spalten:
| Platzhalter | |
|---|---|
{{row_<feld>}} | Rohwert (Objekte als JSON) |
{{rowtext_<feld>}} | Text wie in der Tabelle (Datum, Zahlenformat, Zuordnung, Präfix/Suffix) |
Andere Zeichen als Buchstaben, Ziffern und _ im Feldnamen werden zu _: Wert (kWh) → {{row_Wert__kWh_}}. Gilt in Popup-Titel, HTML-Popup und allen Feldern der Widgets einer Popup-View. Ohne eigenen Titel heißt das Popup wie die erste sichtbare Zelle.
| Option | |
|---|---|
rowClickAction | Aktion je Zeile; leer = Zeilen nicht anklickbar |
rowPopupTitle | Popup-Titel, darf Platzhalter enthalten |
HTML-Breite
Titel & Icon
| Option | Standard | |
|---|---|---|
showTitle | true | Titel anzeigen |
showIcon | true | Icon anzeigen |
icon | Table2 | Lucide-Icon |
iconSize | 20 | px |
titleAlign | left | left · center · right |