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