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
If a table column has the "hidden" property set, the column will be hidden on the grid.
If a table column has a "values" property set to an array of values, these values will be offered to the user as a drop-down list.
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 |