Fields

Grid Field

The Grid Field allows for capturing a multi-dimensional array of values.

It uses ag-grid under the hood.

Basic usage

Adds a grid field with two columns, Employee Name and Present.
The present column will be an editable checkbox.

Parameters

See fields for common field parameters like validation and conditional rendering.

params.columnDefs

An array of column definitions for the grid.
See the ag-grid documentation for more information.

columnDef

field

The name of the column in the grid. This must match the name of the key in the grid's data.

editable

Whether the column is editable.

cellEditor

One of the provided cell editors from ag-grid.
For example, agSelectCellEditor, agDateCellEditor, agNumberCellEditor, agLargeTextCellEditor.

cellEditorParams

The parameters for the specified cellEditor.
See for example the params for the agSelectCellEditor.

Grid Data

The data (value) given to the grid field, must be an array that matches the column definitions.

So given the columnDefs above, the data should look like this:

        [
  {
    "employee_name": "John Doe",
    "present": true
  },
  {
    "employee_name": "Albert Hill",
    "present": false
  }
]

      

Examples

Simple roll call grid field

Result

Project management grid with all available cell editors and filtering

Result