Grid

The grid component allows a table to be edited. It is used in two standard components:

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