Data Grids allow users to create line-item grids where multiple components can be added. Users can add various components inside a Data Grid, and multiple grids can be added within a form. This feature is particularly useful when you need to add or duplicate multiple field sets.
By default, the grid is empty, but you can place other form components inside it.
In the example below, three components have been placed inside the Data Grid. A new column is automatically added whenever another component is added to the data grid interface.
When rendering the form, the Data Grid looks like the example below. Rows can be dynamically added and removed as highlighted.
Display Tab:
- Label: You can place the title or name in this component.
- Label Position: This setting allows you to adjust the position of the component name and label.
- Label Width: This setting allows you to adjust the width of the component name and label.
- Label Margin: With this setting, you can adjust the margins of the component name and label.
- Tooltip: Entering data here will create a tooltip icon on the field.
- Description: In the description field, you can enter text that will appear below the Input Field.
- Disable Adding / Removing Rows: This option hides the 'Add Another' and 'Remove Row' buttons, preventing users from adding or removing rows.
- Conditional Add Button: This feature allows you to specify conditions under which the 'Add Button' will be displayed, providing more control over when users can add rows.
- Allow Reorder: Enabling this option allows users to reorder rows by dragging and dropping them within the Data Grid.
- Add Another Text: You can set the text displayed on the 'Add Another' button to customize the user experience.
- Add Another Position: This setting lets you choose the position of the 'Add Another' button within the Data Grid. It can be placed at the top, bottom, or in both positions.
- Equal Column Width: Enabling this option makes all columns in the Data Grid have equal width, ensuring a uniform appearance.
- Enable Row Groups: This feature allows you to group Data Grid rows. You can create groups, assign labels, specify the number of rows within each group, and delete groups. It's useful when you want to organize rows into specific groups with predefined sizes.
- Custom CSS Class: With this setting, you can add a CSS class. Multiple classes can be added, and class names can be separated by only a space.
- Tab Index: The Tab Index setting indicates which element in a form can be focused and which cannot. It works as a global attribute and provides 3 different results depending on the integer. A Negative Integer (-1) indicates that the elements are unfocused and unreachable by sequential navigation. Zero Integer (0) indicates that the elements are focused and can be reached with sequential navigation. A Positive Integer (1) functions like the zero integer but allows setting an order depending on the number.
- Hidden: Enabling this setting will hide your field from viewing when the form is extracted.
- Hide Label: In this component, you can hide the label or name. Sometimes you only need the component field and not the label; hide label is used for that purpose.
- Initial Focus: Enabling this setting can make the field initially focused. Please note that only one field or component can be the initial focus in a form.
- Disabled: Enabling this setting will disable the component from the form.
- Table View: When this setting is enabled, the data on this component will only show up in the submission list of the table view.
Data Tab:
- Persistent: If you enable this setting, your data will not emerge in the properties.
- Protected: If you do not want to show the input value in properties when queried by the API, you can enable this setting.
- Database Index: If you select this setting, this will create an index within the database which will help to improve performance when queries are submitted.
- Encrypted: Encrypt this field on the server. It is two-way encryption, and it is not appropriate for passwords. This setting is only available on the ‘Enterprise’ project plan.
- Redraw On: With this option, you can link or connect another component; you can redraw the component if the other component is updated.
- Clear Value When Hidden: As the name suggests, the value of this field will be cleared if the hidden option is selected.
- Calculate Value on server: As the name suggests, if you select this setting, it will run the calculations on your server.
Validation Tab:
- Validate On: Selecting this setting will determine when to allow the front-end validation of the component. It provides two options to choose from: Change and Blur.
- Required: Enabling this setting will make this component a must, and the user cannot submit the form without filling this component.
- Unique: Enabling this setting will help the user understand that this information is not provided before while submitting the form.
- Minimum Length: In this setting you can define the minimum limit required in this field.
- Maximum Length: In this setting you can define the maximum limit required in this field.
- Error Label: With this setting, you can enter text that will be displayed when the field displays an error message.
- Custom Error Message: In this setting, you can enter the error message that will be displayed to the user if any error occurs while filling out the form.
API Tab:
- Property Name: In this setting, you can provide the name of the field in the API endpoint.
- Field Tags: In this setting, you can enter the tags for the field that can be used in custom logic.
- Custom Properties: In this setting, you can enter any custom properties to configure this component.
Conditional Tab:
- This component should Display: In this setting, you can choose "True and False" to determine if this component should display.
- When the form component: In this setting, you can choose if you want the component to be displayed after it is submitted.
- Has the value: In this setting, you can choose the value of the component when it should be hidden or displayed.
Layout Tab:
- HTML Attributes: In this setting, you can enter HTML attributes map for the component's input.