The grid component allows a table to be edited. It is used in two standard components:
- The Grid Field member type.
- The Form Script grid field type, which is implemented by Grid Field Script.
The grid component takes a table object (see Table structure) and allows the table to be edited.
The grid reads and updates a JSON object in a textarea, as in the following example.
<textarea class="grid" data-options="{}">{
"options": {
},
"columns": [
{
"name": "Year",
"reference": "year"
},
{
"name": "Sales",
"reference": "sales",
"type": "number"
},
{
"name": "Production volume (units)",
"reference": "volume",
"type": "number"
}
],
"rows": [
{
"year": "2022",
"sales": 141231,
"volume": 9850
}
]
}</textarea>The grid supports the following table data types - any other types are assumed to be text:
- number
- boolean
- date
- timestamp
The text format is assumed to be a single line. Use "format": "text" to indicate that it is multi-line input.
Other column properties.
| hidden | Do not show the column. |
| edit | Set to false (not just omitted) to make the column non-editable. |
| values | Used to populate drop-downs on the grid. |
Options are read from the table options object and the data-options attribute, with those from the data-options overriding those from table options. The following are supported:
| modifyColumns |
Set to true to allow the user to modify the columns. When the users modify columns, all columns will be simple text. |
| freezeColumns |
Allow the table to overflow the width of the surrounding area, scroll the table, except for the number of columns defined in freezeColumns. Set freezeColumns to 0 to enable scrolling without any fixed columns. |
| showRowNumbers |
Set to true to show a row number column |