The table field.

The table field is useful when you have an array of data objects that have a uniform structure. It provides a condensed and table-based way of viewing data. In editable mode, each table field has a toolbar at the top for adding new rows. Each row in the table has an action bar.

The table field is an extension of the ArrayField and so all array field configuration options apply.


TitleTable Field
DescriptionRenders array items into a table
JSON Schema Type(s)array
Field Typetable
Base Field Typearray


defaultanyThe default value to be assigned for this property. If the data for the field is empty or not provided, this default value will be plugged in for you. Specify a default value when you want to pre-populate the field's value ahead of time.
dependenciesarrayList of property dependencies.
descriptionstringDetailed description of the property.
disallowarrayList of disallowed values for the property.
formatstringData format of the property.
itemsobjectSchema for array items.
maxItemsnumberMaximum number of items.
minItemsnumberMinimum number of items.
readonlybooleanIndicates that the field is read-only. A read-only field cannot have it's value changed. Read-only fields render in a grayed-out or disabled control. If the field is rendered using a view with the displayReadonly attribute set to false, the read-only field will not appear.
requiredbooleanIndicates whether the field's value is required. If set to true, the field must take on a valid value and cannnot be left empty or unassigned.
titlestringShort description of the property.
typestringarrayData type of the property.
uniqueItemsbooleanItem values should be unique if true.


actionbarStylestringtopThe kind of actionbar to render for each item in the array. Either 'top', 'bottom', 'left', or 'right'.
animatebooleantrueUp and down transitions will be animated
collapsedbooleanField set is initially collapsed if true.
collapsiblebooleanField set is collapsible if true.
datatablesobjectOptional configuration to be passed to the underlying DataTables Plugin.
disabledbooleanField will be disabled if true.
dragAndDropbooleanIf true, drag and drop is enabled for array items.
dragRowsbooleanWhether to enable the dragging of rows via a draggable column. This requires DataTables and the DataTables Row Reorder Plugin.
fieldClassstringSpecifies one or more CSS classes that should be applied to the dom element for this field once it is rendered. Supports a single value, comma-delimited values, space-delimited values or values passed in as an array.
focuscheckboxtrueIf true, the initial focus for the form will be set to the first child element (usually the first field in the form). If a field name or path is provided, then the specified child field will receive focus. For example, you might set focus to 'name' (selecting the 'name' field) or you might set it to 'client/name' which picks the 'name' field on the 'client' object.
formobjectOptions for rendering the FORM tag.
helperstringField help message.
helpersarrayAn array of field help messages. Each message will be displayed on it's own line.
helpersPositionstringbelowDefines the placement location of the helper text relative to the control (either 'above' or 'below')
hiddenbooleanField will be hidden if true.
hideInitValidationErrorbooleanHide initial validation errors if true.
hideToolbarWithChildrenbooleantrueIndicates whether to hide the top toolbar when child elements are available.
idstringUnique field id. Auto-generated if not provided.
labelstringField label.
lazyLoadingbooleanChild fields will only be rendered when the fieldset is expanded if this option is set true.
legendStylestringbuttonField set legend style.
optionLabelsarrayAn array of string labels for items in the enum array
readonlybooleanField will be readonly if true.
showActionsColumnbooleantrueWhether to show or hide the actions column.
showMessagesbooleantrueDisplay validation messages if true.
toolbarPositionstringtopLocation of the top-level toolbar to render for the array field. Either 'top' or 'bottom'.
toolbarStickybooleanIf true, the array item toolbar will always be enabled. If false, the toolbar is always disabled. If undefined or null, the toolbar will appear when hovered over.
toolbarStylestringbuttonThe kind of top-level toolbar to render for the array field. Either 'button' or 'link'.
typestringtableField type.
validatebooleantrueField validation is required if true.
viewstringAllows for this field to be rendered with a different view (such as 'display' or 'create')

Example 1

Table field for an array of text items.

Example 2

Here is a more advanced table with a few additional control types. We wrap the form with a button that hands back the underlying JSON.

Example 3

Here is a table with the data shown in display mode. When in display mode, the table does not show it's actions or toolbar buttons.

Example 4

Here is a table with the data shown in read-only. When in read-only mode, the table does not show it's actions or toolbar buttons.

Example 5

The table field uses the esteemed Data Tables Plugin, if available, to format the table and provide additional interaction features. You can use the options.datatables field to pass configuration information to the underlying Data Tables Plugin. You can also set options.datatables to false to disable the Plugin.

Example 6

You can disable the actions column by setting showActionsColumn to false.

Example 7

Mix table with interesting control types for inline editing. Here, we maintain a rank property that auto-updates as fields move around. The "Show JSON" button in the form lets us see the resulting JSON for the table.

Example 8

Adding and removing rows dynamically using setValue.

Example 9

Drag-and-drop support for draggable table row re-ordering using the dragRows option. Set dragRows to true to enable draggable rows within your table.

NOTE: This feature currently requires the plugin as well as the core library.

See the DataTables RowReorder Plugin for more information.

If you run into problems with the placement of the draggable overlay, you may need to force absolute positioning of the overlay like this:

    position: absolute !important;

NOTE: This feature is experimental and may change in the future. We're not altogether that happy with the DataTables RowReorder Plugin and may seek to implement differently. However, the dragRows option will continue to work as it does currently and will be supported in the future.

© 2019 Gitana Software, Inc.

Alpaca is sponsored by