Table widget reference

Table kolommen, regels en cell actions

Dit is de volledige kolomreference voor table widgets. Inclusief display-opties, totals, breakdown summaries, kleur/icon/value rules, progress bars en interactieve acties.

Table hub Top-level opties Label templates (table) Kolomschema Cell actions

1. Kolomschema (`columns[]`)

Elke kolom vereist minstens field. Zonder field wordt de kolom niet opgeslagen.

Kolomkey	Type	Beschrijving
`field`	string	Bronveld (verplicht voor persist).
`columnId`	string	Stabiele kolom-ID voor cross-column templates en referenties.
`header`	string	Kolomtitel.
`headerIcon`, `headerIconOnly`	string/bool	Header icon en icon-only weergave.
`type`	string	Datatype hint: `string\|number\|decimal\|currency\|percent\|date\|datetime\|time\|html`.
`width`, `align`	string	Breedte en uitlijning (`left/right/center`).
`prefix`, `suffix`	string	Tekst voor/na de celwaarde.
`labelFields`	string[]	Inputvelden voor samengestelde labels.
`labelTemplate`	object	JSON template met niet-lege `ops[]`.
`sortable`	bool	Default true; false schakelt sorteren uit.
`sanitizeHtml`	bool	Default true; false laat rauwe HTML renderen.
`hideWhenUngrouped`, `hideOnMobile`	bool	Conditioneel verbergen.
`currencyCode`, `currencyCodeField`	string	Valuta direct of per-row via veld.
`currencyDisplay`	symbol/code/symbol-narrow	Valutaweergave in cel.
`currencySummaryDisplay`	inline/columns	Valutaweergave voor summary output.
`digitsInfo`, `dateFormat`	string	Formatstrings voor getal/datum.
`total`	string/object	`sum\|avg\|min\|max\|count\|countDistinct`, of object met `label`/`valueField`.
`breakdownSummary`	object	Summary details per kolom (zie sectie 2).
`valueColoring`	array	Kleurregels op basis van operatorvergelijking.
`usePageColorRules`	bool	Hergebruik page color rules.
`valueIcons`, `valueIconDefault`, `valueIconOnly`	array/string/bool	Icon mapping met fallback en icon-only render.
`usePageValueRules`, `valueReplacements`	bool/array	Waarde replacement regels op kolomniveau.
`progressBar`	object	`{ enabled, min, max }`.
`cellActions`	array	Click acties per cel.

2. Breakdown summary, kleur/icon/value regels

Breakdown summary

mode: count, sum, percent, date-range.
valueField wordt gebruikt voor sum, percent, date-range.
displayMode: reuse, separate, columns.
dateRangeDisplay: range of min-max-columns.

Value color/icon operators

Ondersteunde operators: eq, neq, gt, gte, lt, lte.
valueColoring ondersteunt ook caseSensitive per regel.
valueIcons gebruikt hetzelfde operator-model.

Value replacements

matchMode: exact of regex.
replacementType: text, html, svg, icon, png.
maxHeightEm wordt als positief getal opgeslagen.

Progress bar

Alleen actief als enabled=true.
min en max worden alleen opgeslagen bij valide numerieke input.
Lege of ongeldige grenzen worden genegeerd.

3. Cell actions schema

Actietype	Belangrijkste keys	Validatie en gedrag
`set-filter`	`key`, `valueField`/`value`, `valueType`, `datePreset`, `dateRange`, `targetDataSourceUids`	Ondersteunt single en date-range mode. Date-range vereist preset of from/to waarden.
`navigate`	`url`, `commands`	`commands` moet een JSON array zijn, anders save-fout.

Date-range details voor `set-filter`

dateRange.preset moet een geldige preset zijn uit de date preset util.
fromValue/toValue ondersteunen raw en date mode.
Als preset en from/to allemaal leeg zijn, blokkeert save met Provide a preset or range values.
targetDataSourceUids wordt opgeschoond en deduped.

4. Voorbeeld uitgebreide kolomconfig

{
  "columns": [
    {
      "field": "status",
      "columnId": "status_col",
      "header": "Status",
      "valueColoring": [
        { "value": "open", "operator": "eq", "color": "#22c55e" },
        { "value": "closed", "operator": "eq", "color": "#ef4444" }
      ],
      "valueIcons": [
        { "value": "open", "operator": "eq", "icon": "pi pi-check-circle" },
        { "value": "closed", "operator": "eq", "icon": "pi pi-times-circle" }
      ],
      "cellActions": [
        {
          "type": "set-filter",
          "key": "status",
          "valueField": "status",
          "targetDataSourceUids": ["primary", "secondary"]
        }
      ]
    },
    {
      "field": "amount",
      "header": "Bedrag",
      "type": "currency",
      "currencyCode": "EUR",
      "digitsInfo": "1.0-2",
      "total": { "type": "sum", "label": "Totaal" },
      "progressBar": { "enabled": true, "min": 0, "max": 100000 }
    }
  ]
}