Configure Tables

Use table controls to group multiple controls in a grid pattern into your form.

To configure a table control:
  1. From the Advanced palette, drag and drop a table control onto the canvas.

    By default the table control contains one column.

  2. Select the control and edit its properties on the Properties pane's General tab.
    Field Description

    Name

    An internal identifier that you will use to identify the control.

    Label

    The table title that users will see in the form.

    Binding

    Defines a link between the control and a data attribute.

    Empty State Message

    Specify the message that will display when the table is empty.

    Max Rows

    Specify the maximum number of rows that the table can include. By default, this value is set to 200.

    Min Rows

    Specify the minimum number of rows that the table can include.

    Users can Add/Remove Rows

    Allows users to add or remove rows to the table.

    Multiple Selection

    Allows users to select multiple rows of the table.

    Keep Header Visible

    If selected, the table header will scroll, so that it is always visible.

    Hide

    Select this property to hide the control.

    Disabled

    Select this property to display the control as inactive (grayed out) to users.

    Read Only

    Select this property to display the control's content (if any) without allowing users to edit it.

    Columns

    In the Columns field, click Add to add columns. Edit the labels of each column in their respective label fields. Click the Delete icon to delete a column.

  3. Use the Styling tab in the Properties pane to modify the control’s appearance as needed. See Styling Properties. You can specify column width in several ways:
    • Leave the Automatic column size checkbox selected so the table’s columns automatically resize to fit the device on which the form is viewed.
    • Deselect the Automatic column size checkbox and specify column sizes for different device sizes by entering a number from 1 to 12 in the column size fields that display for different devices.
    • In the Table Columns Width fields, specify an absolute width for each column such as 2in (inches), 5cm (centimeters), 100px (pixels), or 25% (percent). If the column widths together exceed the table width, a scroll bar displays, unless columns are defined with percentages. If percentages are specified but exceed 100%, column widths are displayed proportionally across the table.
  4. Drag and drop individual controls from the Basic or Advanced Palette into the columns.

    Each column can have one control.

  5. Configure general and styling properties for the controls inside your table control.

    Note:

    If you delete the table control, all the controls grouped under it get deleted.