Table Embodiment Column Settings

This guide explains how to configure per-column appearance and behavior for ProntoGUI Table primitives. It is written for developers building applications with ProntoGUI.

Overview

A Table primitive can be rendered in one of two embodiments:

• default — a simple non-scrollable table or grid.
• paged — a table with pagination controls, optional sortable columns, and built-in date/time formatting.

Both embodiments accept an optional columnSettings property. This is an array of setting objects, one per column, matched to columns by position:

• The first entry applies to column 0, the second to column 1, and so on.
• You may supply fewer entries than there are columns — remaining columns use defaults.
• Extra entries beyond the column count are ignored.
• Pass an empty object {} to keep a column at defaults while configuring later columns.

Available Per-Column Fields

Field	Type	Used by	Description
width	number	default, paged	Fixed column width in logical pixels. Omit to let the column size flexibly.
sortType	enum	paged	How the column is sorted when the user clicks its header.
dateTimeFormat	string	paged	Pattern used to parse and display date/time values in the column.

sortType values

Value	Meaning
none	Column is not sortable (default).
numeric	Values are compared as numbers.
text	Values are compared as strings.
dateTime	Values are parsed using dateTimeFormat and compared as dates.
tag	Values are sorted by tag (useful when cells carry tagged content).

dateTimeFormat

Uses the same pattern syntax as Dart’s intl DateFormat (e.g. yyyy-MM-dd, MM/dd/yyyy HH:mm, EEE, MMM d). When sortType is dateTime, you should provide this so the column sorts chronologically rather than lexicographically; if it is missing, the column falls back to text comparison and a warning is logged.

Sizing Behavior

• If width is set, the column is laid out at exactly that pixel width.
• If width is omitted, the column flexes to share remaining space with other flexible columns.
• Columns without a columnSettings entry behave as flexible.

Sorting Behavior (paged only)

In the paged embodiment, any column whose sortType is not none becomes interactive in the header. Clicking the header sorts rows by that column; clicking again reverses the order. Only one column is sorted at a time.

If a value in a dateTime column cannot be parsed with the supplied dateTimeFormat, sorting for that click falls back to the table’s natural row order, and an error is logged.

Example

A paged table with four columns: an 80-pixel ID column, a text-sortable name column, a date/time column with formatting, and a fixed-width numeric column.

{
  "embodiment": "paged",
  "rowsPerPage": 10,
  "showFirstLastButtons": true,
  "columnSettings": [
    { "width": 80 },
    { "sortType": "text" },
    { "sortType": "dateTime", "dateTimeFormat": "yyyy-MM-dd HH:mm" },
    { "width": 120, "sortType": "numeric" }
  ]
}

Tips

• Mix fixed and flexible widths to create tables where key columns have a stable size while descriptive columns absorb the extra space.
• When using sortType: "dateTime", make sure every cell in that column matches the dateTimeFormat pattern — a single mismatched value will prevent sorting.
• columnSettings only controls column-level behavior. Cell-level styling (alignment, padding, colors) belongs on the individual cell primitives or on the table’s modelRow, which supplies default properties to every cell in a column.