Table
A structured grid field for capturing tabular data with configurable columns.
Overview
The Table field renders an editable data grid where respondents can add rows of structured data. Each column is configured with a name and an input type (text, number, select, date, or checkbox). Respondents can add, edit, and delete rows directly in the grid.
This field is useful for collecting line-item data such as expense reports, inventory lists, work history timelines, or any scenario where the number of entries is variable but the structure is fixed.
Properties
| Property | Type | Default | Description |
|---|---|---|---|
| type | string | — | The field type identifier (e.g. "text", "email"). |
| label | string | — | Human-readable label shown above the field. |
| name | string | — | Unique machine name used as the data key in submissions. |
| required | boolean | false | When true the form cannot be submitted without a value. |
| placeholder | string | undefined | Ghost text shown inside the input when empty. |
| defaultValue | any | undefined | Pre-filled value when the form loads. |
| hidden | boolean | false | Hides the field from the rendered form (still submitted). |
| disabled | boolean | false | Renders the field as read-only and non-interactive. |
| description | string | undefined | Helper text displayed below the field label. |
| className | string | undefined | Additional CSS class applied to the field wrapper. |
| columns | Column[] | [] | Array of column definitions: { name, label, type, required, options? }. |
| minRows | number | 1 | Minimum number of rows that must be filled. |
| maxRows | number | undefined | Maximum number of rows allowed. |
| addRowLabel | string | "Add Row" | Label for the add-row button. |
JSON Schema
{
"type": "table",
"label": "Work Experience",
"name": "work_experience",
"required": true,
"minRows": 1,
"maxRows": 10,
"columns": [
{ "name": "company", "label": "Company", "type": "text", "required": true },
{ "name": "role", "label": "Job Title", "type": "text", "required": true },
{ "name": "start_date", "label": "Start Date", "type": "date", "required": true },
{ "name": "end_date", "label": "End Date", "type": "date", "required": false },
{ "name": "current", "label": "Current Job","type": "checkbox","required": false }
]
}