Table Field

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.


Title Table
Description Renders array items into a table
Field Type table
Base Field Type array


Property Type Default Description
items object Schema for array items.
maxItems number Maximum number of items.
minItems number Minimum number of items.
uniqueItems boolean Item values should be unique if true.


Property Type Default Description
animate boolean true Up and down transitions will be animated
collapsed boolean Field set is initially collapsed if true.
collapsible boolean Field set is collapsible if true.
datatables object Optional configuration to be passed to the underlying DataTables Plugin.
dragRows boolean Whether to enable the dragging of rows via a draggable column. This requires DataTables and the DataTables Row Reorder Plugin.
lazyLoading boolean Child fields will only be rendered when the fieldset is expanded if this option is set true.
legendStyle string button Field set legend style.
showActionsColumn boolean true Whether to show or hide the actions column.

Example 1

Table field for an array of text items.

{% raw %} {% endraw %}

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.

{% raw %} {% endraw %}

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.

{% raw %} {% endraw %}

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.

{% raw %} {% endraw %}

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.

{% raw %} {% endraw %}

Example 6

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

{% raw %} {% endraw %}

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.

{% raw %} {% endraw %}

Example 8

Adding and removing rows dynamically using setValue.

{% raw %} {% endraw %}

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.

{% raw %} {% endraw %}