//Definitionen für die Ereignisse hier einfügen

function Person(name, location, salary){

this.name = name;

this.location = location;

this.salary = salary;

`{"title":"Salary", "field":"salary", "sorter":"number", "formatter":"progress", "formatterParams":{"min":0,"max":3500,"legend":true}}`

Darstellung als Sternebewertung:

`{"title":"Rating", "field":"rating", "sorter":"number", "formatter":"star"}`

Darstellung einer Farbe:

`{"title":"First Color", "field":"color1", "width":150, "formatter":"color"},`

tableData.push(new Color("#ff0000","green","rgb(255,255,0)"));

Es sind einige weitere Darstellungen möglich, wie eine Farbampel, Kreuze/Haken …. Über die Format-Parameter lassen sich auch einige Gestaltungseigenschaften anpassen (Farben, Ausrichtungen, Bereiche…).

Allgemeine Einstellungen zur Darstellung, die die Tabelle im Ganzen betreffen, müssen im Quellcode durchgeführt werden, da diese Eigenschaften nicht über die Schnittstelle aus dem TIA Portal übergeben werden können.

Beispiele hierfür sind z.B. zentrale Vorgaben der Schriftart/Schriftgröße, Hintergrundfarben, Kategorisierungen.

Schriftarten und Farben sind in der tabulator.css Datei im Ordner Control/dist/css definiert

Ausschnitt:

Weitere Tabelleneigenschaften wie beispielsweise das Gruppieren nach einer Eigenschaft können in der code.js Datei unten bei der Tabellendefinition vorgenommen werden.

//choose how the table should look like or behave. More information on http://tabulator.info/

var table = new Tabulator("#example-table", {

height: 'calc(100% - 2px)', // set height of table to 100% minus 2 px, because the border of the table is 1px top and border

data: tabledata, //load initial data into table

layout: "fitColumns", //fit columns to width of table (optional)

columns: columnStyle,

groupBy:"rating",

Die komplette Beschreibung der Möglichkeiten sind unter folgender Seite zu finden:

www.tabulator.info

Hinweis:
Die in diesem Beitrag beschriebenen Informationen beziehen sich auf den Zeitpunkt der Erstellung dieses Beitrages (Stand: Juli 2025).

Viele Grüße
Eure Fachberatung Deutschland (TH/DB)