The Table component is one of the most powerful tools you can use in your forms. It allows you to collect structured data across multiple fields, making it perfect for use cases like mileage reimbursements, timesheets, and progress tracking. Tables let you break down data into rows and columns, giving you the flexibility to gather detailed information in a clean, organized way.
Example Table
Perfect for capturing a grid of data, especially if you want to calculate across rows or columns
When should I use a Table?
Tables are ideal when you need to collect multiple pieces of related information at once, all within a single grid. Here are some common examples:
Mileage Reimbursements
Track mileage for staff who travel between schools or district offices. You can set up columns for date, starting location, ending location, and miles driven to calculate reimbursements easily.
Track mileage for staff who travel between schools or district offices. You can set up columns for date, starting location, ending location, and miles driven to calculate reimbursements easily.
Timesheets
Great for tracking work hours. You can include columns for date, start time, end time, and total hours worked, simplifying payroll and approvals.
Great for tracking work hours. You can include columns for date, start time, end time, and total hours worked, simplifying payroll and approvals.
Purchase Requests
Set up a table where staff can submit requests for multiple items in one form. Each row of the table can represent a different item, and you can customize the columns to collect specific data like Item Name, Quantity, Price Per Unit, and Total Cost.
Set up a table where staff can submit requests for multiple items in one form. Each row of the table can represent a different item, and you can customize the columns to collect specific data like Item Name, Quantity, Price Per Unit, and Total Cost.
Pro Tip!
Pair a purchase request table with a File Upload component to capture an official quote, too!
Pair a purchase request table with a File Upload component to capture an official quote, too!
Features & Configuration
Adding a Table component to your form is easy. Just drag it from the component library onto your form. Tables have a default width of 12 columns, meaning they will stretch the full width of your form.
After placing the component, you can customize its properties in the right-hand panel:
Properties
Label
This text appears above the table, explaining what the user is generally inputting into the table.
This text appears above the table, explaining what the user is generally inputting into the table.
Columns
The magic of the Table component lies in the columns you can create. Columns are like mini-fields within the table, and each one can collect different types of data.
Here’s how you can configure them:
Column Details
Column Header
This is the title of the column, which appears at the top. For example, “Date,” “Start Time,” or “Miles.”
This is the title of the column, which appears at the top. For example, “Date,” “Start Time,” or “Miles.”
Size
Adjust the width of each column as a percentage of the entire table. You might want a date column to be smaller than a description field, for example.
Adjust the width of each column as a percentage of the entire table. You might want a date column to be smaller than a description field, for example.
Required
You can make columns required so that users must fill in data before submitting the form.
You can make columns required so that users must fill in data before submitting the form.
Input Settings
Each column can collect different types of data, and you can customize it based on the input type:
Text
Under Values Select, you can choose between:
If you're using User Input as the Text type, you can apply a Mask to control the format of the text.
And, if this column contains numbers, you can enable the Sum option to add up all the values in that column.
Under Values Select, you can choose between:
User Input
Submitters can type in their own input
Submitters can type in their own input
Fixed Value List
You can force a pre-set list of values to display in the column
You can force a pre-set list of values to display in the column
Formula
Use a formula to auto-fill values
Use a formula to auto-fill values
If you're using User Input as the Text type, you can apply a Mask to control the format of the text.
And, if this column contains numbers, you can enable the Sum option to add up all the values in that column.
Dropdown
Choose from a list of predefined options, just like in a Dropdown component.
Sum is available here, if applicable, as well.
Choose from a list of predefined options, just like in a Dropdown component.
Sum is available here, if applicable, as well.
Checkbox
Similar to the Checkbox component, you can allow users to check boxes or use a formula to control the true/false state.
Similar to the Checkbox component, you can allow users to check boxes or use a formula to control the true/false state.
Number
Use this for numerical inputs. Enable the Sum option to automatically total up all the values in the column.
Use this for numerical inputs. Enable the Sum option to automatically total up all the values in the column.
Email
Forces email validation, ensuring the entered text is a valid email address.
Forces email validation, ensuring the entered text is a valid email address.
Date, Time, Date & Time, Month
These input types present the appropriate picker. You can apply logic to restrict the minimum and maximum date or time users can choose. For Time inputs, you can also set the Interval, like limiting selections to every 15 minutes — useful for scheduling meeting blocks, for example.
These input types present the appropriate picker. You can apply logic to restrict the minimum and maximum date or time users can choose. For Time inputs, you can also set the Interval, like limiting selections to every 15 minutes — useful for scheduling meeting blocks, for example.
Column-Specific Logic
Display Logic
Control when the column shows or hides based on other inputs. For example, you might hide a date column until another field is completed or only display a certain column on a particular workflow step.
Note: you can also apply table-level display logic when you have the entire table selected.
Control when the column shows or hides based on other inputs. For example, you might hide a date column until another field is completed or only display a certain column on a particular workflow step.
Note: you can also apply table-level display logic when you have the entire table selected.
Validate Logic
Set specific conditions to validate the user’s selection, ensuring it meets your criteria.
Set specific conditions to validate the user’s selection, ensuring it meets your criteria.
Attributes
Color
Choose the font color for the text in your table. This helps distinguish certain columns or rows by applying different colors to make key information stand out.
Choose the font color for the text in your table. This helps distinguish certain columns or rows by applying different colors to make key information stand out.
Background
Set the background color for your table or column. This can help visually organize sections or make specific columns more prominent for the user.
Set the background color for your table or column. This can help visually organize sections or make specific columns more prominent for the user.
Font Family
Select a font family for the text inside the table. You can align the font with your school's branding or form style to maintain consistency across your forms.
Select a font family for the text inside the table. You can align the font with your school's branding or form style to maintain consistency across your forms.
Font Size
Adjust the font size to ensure your text is legible and fits well within the layout of the table. This is helpful when displaying large data sets that require resizing for readability.
Adjust the font size to ensure your text is legible and fits well within the layout of the table. This is helpful when displaying large data sets that require resizing for readability.
Bold, Italics, Underline
You can apply Bold, Italics, or Underline styles to specific columns or rows to highlight important information or create emphasis where needed.
You can apply Bold, Italics, or Underline styles to specific columns or rows to highlight important information or create emphasis where needed.
Alignment
Choose how to align the text within your table columns: left, center, right, or justified. This option helps keep your data visually organized and easy to scan.
Choose how to align the text within your table columns: left, center, right, or justified. This option helps keep your data visually organized and easy to scan.
Column-Specific Details
ID
Each Droplet component has a unique ID for referencing in workflows or visibility settings. Edit the default ID to make it more descriptive.
Columns each have their own ID which is distinct from the entire table's ID. You can configure a table ID when you select the entire table, as opposed to a specific column.
Each Droplet component has a unique ID for referencing in workflows or visibility settings. Edit the default ID to make it more descriptive.
Columns each have their own ID which is distinct from the entire table's ID. You can configure a table ID when you select the entire table, as opposed to a specific column.
Table-Level Logic
Display Logic
Control when the entire table shows or hides based on other inputs.
Note: you can also apply column-specific display logic when you have a particular column selected.
Control when the entire table shows or hides based on other inputs.
Note: you can also apply column-specific display logic when you have a particular column selected.
Display Rows Logic: Table-Level Only
Set how many rows should display. You can fix the number of rows with Display Rows Logic, overriding the option for users to add or delete rows. This is useful when you need a set number of entries, like in a weekly timesheet where users must fill out exactly seven rows (one for each day).
Set how many rows should display. You can fix the number of rows with Display Rows Logic, overriding the option for users to add or delete rows. This is useful when you need a set number of entries, like in a weekly timesheet where users must fill out exactly seven rows (one for each day).
Table-Level Details
Hint
Hints are short pieces of text that appear beneath the table to provide extra clarity.
Hints are short pieces of text that appear beneath the table to provide extra clarity.
Tooltip
Tooltips are helpful text that users can see when they hover over the question mark icon next to the component.
Tooltips are helpful text that users can see when they hover over the question mark icon next to the component.
Name
You can change the Name field to a more descriptive identifier that will appear in your CSV exports.
You can change the Name field to a more descriptive identifier that will appear in your CSV exports.
ID
Each Droplet component has a unique ID for referencing in workflows or visibility settings. Edit the default ID to make it more descriptive.
Columns each have their own ID which is distinct from the entire table's ID. You can configure a table ID when you select the entire table, as opposed to a specific column.
Each Droplet component has a unique ID for referencing in workflows or visibility settings. Edit the default ID to make it more descriptive.
Columns each have their own ID which is distinct from the entire table's ID. You can configure a table ID when you select the entire table, as opposed to a specific column.
Was this article helpful?
That’s Great!
Thank you for your feedback
Sorry! We couldn't be helpful
Thank you for your feedback
Feedback sent
We appreciate your effort and will try to fix the article