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

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