Corfix Form Builder: Using the Table Component.

1. Display Tab

The Display tab controls the layout and general appearance of the Table Component.

• Label:

  • This is the title for your table component. While it's a required field, it often serves more as an identifier within the form builder rather than a prominently displayed label to the user.

  • Example: "Items Table", "Measurements", "Equipment Checklist".

• Number of Rows:

  • Specifies the initial number of horizontal rows in your table.

  • Default: 3.

• Number of Columns:

  • Specifies the initial number of vertical columns in your table.

  • Default: 3.

• Clone Row Components:

  • If checked, when you add a new row to the table in the form, the components from the previous row will be copied into the new row. This is useful for repeating sets of fields.

• Cell Alignment:

  • Controls the default horizontal alignment of content within the table cells (e.g., Left, Center, Right).

  • Default: Left.

• Custom CSS Class:

  • Allows advanced users to apply custom styling to the entire table component using CSS classes.

• Striped:

  • If checked, the table rows will have alternating background colors, which can improve readability for long tables.

• Bordered:

  • If checked, the table will have visible borders around its cells.

• Hover:

  • If checked, rows will highlight when the user hovers their mouse over them, indicating interactivity.

• Condensed:

  • If checked, the table will use less padding, making it more compact.

• Hide Label:

  • If checked, the main label for the table component will not be displayed on the form.

• Modal Edit:

  • (Details not fully visible in screenshot, but typically relates to editing components within table cells in a pop-up modal window).

2. Conditional Tab

The Conditional tab allows you to set up rules for when this entire Table Component (and all components within it) should be displayed or hidden based on the values of other components in the form.

• Simple:

  • This is typically a toggle or a dropdown to select between simple and advanced conditional logic.

• This component should Display:

  • Choose whether the component should "Show" or "Hide" (implied options) based on the condition.

• When the form component:

  • Select another component in your form whose value will trigger the condition.

• Has the value:

  • Specify the exact value that the selected form component must have for the condition to be met.

  Example: You could set up a rule so that an "Equipment List" table only displays when a "Do you have equipment to list?" checkbox is checked.

Preview Window

The Preview area on the right side of the dialog box visually represents the table structure you are building. It shows the grid of rows and columns, reflecting the "Number of Rows" and "Number of Columns" you've defined, giving you an immediate sense of the table's layout.

Actions at the bottom of the dialog:

• Save: Saves all changes made to the Table Component's settings.

• Cancel: Discards any unsaved changes and closes the dialog.

• Remove: Deletes the Table Component and all components placed within it from the form.

Best Practices for Table Component:

• Structure Repeating Data: Use tables to organize fields when you need to collect the same type of information multiple times in a structured way (e.g., a list of items with quantity and price).

• Define Rows & Columns Clearly: Set initial "Number of Rows" and "Number of Columns" based on your typical data needs. Users can often add more rows later.

• Use "Clone Row Components": If the same set of fields will be collected in each row, enabling "Clone Row Components" saves time when building the table and for the user.

• Enhance Readability: Consider checking "Striped" or "Bordered" for better visual separation of data, especially for larger tables.

• Conditional Display for Relevance: Show or hide entire tables using conditional logic to make your forms dynamic and prevent unnecessary clutter.