Input form control

Table

<ut-table>

An editable table for line items, attendees or readings, with typed columns, per-cell validation, totals and spreadsheet-style keyboard editing.

Officialv1.0.0 Self-contained

Download .utpkg 21 KB Install in your workspace

Try it

Live preview

The real control in the same sandboxed frame the app uses. Switch to dark mode or read-only to see how it adapts.

Line items

Value the form receives

[
  {
    "item": "Laptop",
    "quantity": 2,
    "unit_price": 1499,
    "category": "Hardware"
  },
  {
    "item": "Docking station",
    "quantity": 2,
    "unit_price": 189.5,
    "category": "Hardware"
  },
  {
    "item": "Design software licence",
    "quantity": 1,
    "unit_price": 599,
    "category": "Software"
  }
]

Sandboxed frame (opaque origin, its own CSP), talking to this page only through the typed postMessage bridge — exactly as on a form.

About

What it does

Collect repeating rows in one field: the line items of a purchase request, the attendees of an event, the readings of an inspection, the expenses of a trip. You define the columns (text, number, currency, date, choice from a list, or tick box), mark the required ones, set number bounds and widths, and choose whether people can add and delete rows, with a minimum and maximum row count.

Every cell is checked as people type: a required item left blank or a quantity below its minimum is marked on the cell itself and summarised for the form ("Row 2: Quantity must be at least 1"). An optional totals row sums the number and currency columns. Starting rows can be shown without being stored, so a template row never ends up in the submission by accident.

It works like a small spreadsheet from the keyboard: one Tab stop, arrow keys between cells, typing or Enter to edit, Enter to save and move down, Escape to cancel, Ctrl+Enter to add a row. Screen readers hear each cell with its column and row. On a phone the table scrolls sideways inside its own frame. The value is a list of plain objects with real numbers, booleans and ISO dates, ready for workflows and reports.

Good for

Line items on a purchase request, with quantities, prices and a total
Attendee list for an event or training booking
Readings or defects recorded during an inspection

After installing

Install the package: the control appears in Extensibility → Form controls and in the form designer's palette under Custom.
Drag Table onto a form and define the columns in the properties panel (key, label, type, required, options, min / max, width).
Set the row limits, whether people can add or delete rows, the currency for currency columns, and (optionally) the starting rows and the totals row.

Reference

Value, properties and accessibility

Value

array

Stored as the field's value (type array), validated by the server against the control's schema; the control also reports its own validity while people type.

Read-only views (completed tasks, mobile, emails) show the value as json.

Keyboard and screen readers

Role: grid, named by the field label.

Tab into the table (one stop). Arrow keys move between cells, Home / End to the row's ends (Ctrl+Home / End to the table's), Enter, F2 or typing edits a cell; Enter saves and moves down, Shift+Enter up, Escape cancels; Tab / Shift+Tab move cell by cell and leave the table at its ends. Delete clears a cell, Space or Enter toggles a tick box, Ctrl+Enter adds a row; each row's Delete row button is the last cell of the row.

Properties (set in the form designer)
Property	Type	Default	What it does
Columns `columns`	json	[object Object], [object Object], [object Object]	A list of columns: { "key", "label", "type": text \| number \| currency \| date \| select \| checkbox, "required", "options" (select), "min" / "max" (number, currency), "width" (px) }.
Minimum rows `min_rows`	number 0–200	0
Maximum rows `max_rows`	number 1–200	50
Allow adding rows `allow_add`	boolean	yes
Allow deleting rows `allow_delete`	boolean	yes
Show totals `show_totals`	boolean	no	A footer row summing the number and currency columns.
Currency `currency`	string	USD	ISO 4217 code for currency columns (USD, EUR, NZD, …).
Starting rows `default_rows`	json	—	Rows shown before the person edits (a list of objects keyed by column key). Not stored until the table is edited.

Install

Install it in your workspace

Works on UserTasks cloud and any self-hosted instance. The control lands in Extensibility → Form controls, enabled, and appears in the form designer's Custom palette.

In the app

Open Extensibility → Form controls → Browse gallery (it opens Packages → Browse gallery on the Form controls tab) and choose Install on Table. Or download form-control-table-1.0.0.utpkg and drag it onto Automations → Packages.
The wizard verifies the checksum, every file hash and the signature, and shows what it adds.
Drag the control onto a form in the designer and set its properties.

With the CLI

shell

curl -fLO https://usertasks.com/gallery/form-control-table-1.0.0.utpkg
usertasks packages inspect form-control-table-1.0.0.utpkg
usertasks packages install form-control-table-1.0.0.utpkg

Verify the download

File SHA-256: fedaee66bcf39268894f463fae2d5039ba9db64cd54921841a7b39ef6b293d3f
Package checksum (what is signed): sha256:02eee48b9a3a04f8659310ed758ffc3d0dafab93ddde2405340d91947bcbbef6
<ut-table> module SHA-256: a97a72b35c8929d0692726855f27036eaae5e2b038b4c3fc4ff643967a948206
Signer: UserTasks Gallery · 49:f3:04:90:47:02:4d:07:28:61:3d:dc:bb:aa:db:11

More form controls

All controls