Tables are versatile components within the Droplet platform that facilitate the collection of various data related to a specific subject. Whether you need to gather emergency contact information or track clocked hours for a timesheet, tables offer flexibility to suit your needs, from simple to robust data collection.

Tables provide a structured format for organizing and collecting data efficiently. This article will guide you through the properties available to customize your tables.

Table Properties

The versatility for tables is found inside the properties panel on the right-hand side. You will be able to change all labels, control the number of rows, and add logic. Each column also has properties you will be able to change to fit your needs. 

Label

The label is not required and may not always be necessary, but can be helpful to identify the table for the user. 

Display Logic

Use display logic to only show the table when certain conditions are met. For more information on Display Logic, view this article.

A common use case is to only show a timesheet table once the pay period dates have been selected.

Hint

If you need to display descriptive information that will help the form user use the table, you can add a hint. The hint will show below the table. 

Tooltip

If you need to display descriptive information that will help the form user use the table, you can add a tooltip. The tooltip will add an icon next to the Label and will only display the text when the user hovers over the icon. 

Name

The name will show in exported submissions as the column’s header. The name will default to the label of the table, but can be edited if you would like the exported file to have a different header.

Table Row Properties:

A Table can have unlimited rows or a defined number of rows. You have the ability to control how users interact with the rows with these table properties. 

Display Rows Logic

You can set the number of rows displayed using a logic formula. Display Rows Logic will need to evaluate to a number. 

For example, if you need a second table to gather additional information. You can insert a formula that calculates the number of rows in the first table and display the same number of rows in the second table. 

The formula would use the id of the first table with the .length javascript method to get the number of rows in the first table.

table1.length

Initial Rows

You can set the amount of rows initially visible using a number.

Min/Max Rows

Choose the minimum rows allowed for the Table and the maximum rows allowed.

Enable Delete

When this is toggled on, this allows users to delete rows. 

Table Column Properties:

To access the column properties, you will need to click the column you would like to customize. This will change the properties panel to the Table Column properties. 

To get back to the Table properties, click the button with the table's label. 

Column Header

This is essentially the label of the column.

Column Size

The size will automatically adjust to be equal between the columns, but you can manually adjust the size using the sliding selector or entering in a percentage. 

Column Required

This determines whether the column will be required if toggled on or optional if toggled off. All columns are toggled off by default.

Column Type

Choose what data type will be accepted for this column. Choose from Text, Dropdown, Checkbox, Number, Email, Date, Time, Date & Time, or Month. 

Column Values Select

Determine how the values will be added to this column from one of three options: User Input, Fixed Value List, or Formula.

User Input: Allow the user to input a value into the column.

Fixed Value List: Determine the value of each row in the column by listing each.

Formula: Determine the value of each row by using a javascript formula.

Options

If a Column Type of Dropdown is selected or the Column Values Select is set to "Fixed Value List", you will be able to enter the options for the dropdown or enter a list of values for each row of the table.

Column Mask

When there should be uniform formatting for values for a phone number, social security number, id number, budget code, etc. a mask will need to be selected or custom created.

Column Sum

Toggle on Sum when you would like to calculate the total of each of the values entered into the column.