Dashview Docs

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
Table kolommen, regels en cell actions overzicht
Table kolommen, regels en cell actions overzicht.

1. Kolomschema (columns[])

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

Kolomkey Type Beschrijving
fieldstringBronveld (verplicht voor persist).
columnIdstringStabiele kolom-ID voor cross-column templates en referenties.
headerstringKolomtitel.
headerIcon, headerIconOnlystring/boolHeader icon en icon-only weergave.
typestringDatatype hint: string|number|decimal|currency|percent|date|datetime|time|html.
width, alignstringBreedte en uitlijning (left/right/center).
prefix, suffixstringTekst voor/na de celwaarde.
labelFieldsstring[]Inputvelden voor samengestelde labels.
labelTemplateobjectJSON template met niet-lege ops[].
sortableboolDefault true; false schakelt sorteren uit.
sanitizeHtmlboolDefault true; false laat rauwe HTML renderen.
hideWhenUngrouped, hideOnMobileboolConditioneel verbergen.
currencyCode, currencyCodeFieldstringValuta direct of per-row via veld.
currencyDisplaystringToegestane waarden: symbol, code, symbol-narrow. Valutaweergave in cel.
currencySummaryDisplaystringToegestane waarden: inline, columns. Valutaweergave voor summary output.
digitsInfo, dateFormatstringFormatstrings voor getal/datum.
totalstring/objectAls string, toegestane waarden: sum, avg, min, max, count, countDistinct. Mag ook een object met label/valueField zijn.
breakdownSummaryobjectSummary details per kolom (zie sectie 2).
valueColoringarray/objectKleurregels op basis van operatorvergelijking. Regelwaarden mogen string, number of boolean zijn.
usePageColorRulesboolHergebruik page color rules.
valueIcons, valueIconDefault, valueIconOnlyarray/string/boolIcon mapping met fallback en icon-only render.
usePageValueRules, valueReplacementsbool/arrayWaarde replacement regels op kolomniveau.
progressBarobject{ enabled, min, max }.
cellActionsarrayClick 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.
  • Gebruik numerieke waarden direct voor drempels, bijvoorbeeld { "operator": "gte", "value": 1000, "color": "#16a34a" }.
  • 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 toegestane waarden: current_value, current_filters, today, yesterday, day_before_yesterday, last_7_days, last_14_days, last_30_days, last_60_days, last_90_days, this_week, last_week, two_weeks_ago, three_weeks_ago, four_weeks_ago, this_month, last_month, two_months_ago, three_months_ago, last_2_months, last_3_months, last_6_months, this_quarter, last_quarter, q1_this_year, q2_this_year, q3_this_year, q4_this_year, q1_last_year, q2_last_year, q3_last_year, q4_last_year, year_to_date, this_year, last_year, last_3_years, last_5_years, last_10_years.
  • fromValue/toValue ondersteunen modes raw en date.
  • 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": "amount",
      "header": "Omzet",
      "type": "currency",
      "currencyCode": "EUR",
      "valueColoring": [
        { "value": 1000, "operator": "gte", "color": "#16a34a" },
        { "value": 100, "operator": "lt", "color": "#64748b" }
      ]
    },
    {
      "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 }
    }
  ]
}