--- title: "Dynamic Grid Component" slug: "dynamic-grid-component" updated: 2026-02-03T20:44:35Z published: 2026-02-03T20:44:35Z canonical: "docs.unqork.io/dynamic-grid-component" --- > ## Documentation Index > Fetch the complete documentation index at: https://docs.unqork.io/llms.txt > Use this file to discover all available pages before exploring further. # Dynamic Grid Component > [!WARNING] > The Dynamic Grid component is a runtime component and is not supported in the Vega (2.0) runtime. UDesignerClassic Designer The **Dynamic Grid component** combines the ease and usability of a spreadsheet with the power and flexibility of an Unqork grid component. In Express View, your end-user gets a streamlined, spreadsheet-like data entry and exploration experience. Built with large-scale data sets in mind, use a Dynamic Grid to focus on supporting high-performance data consumption, analysis, and exploration use cases. Dynamic Grid also includes features like pivot mode, data aggregation and grouping, and more. You have various options for populating your Dynamic Grid component: - Inline editing and data entry in Express View. - Using a logic component to output data to the Dynamic Grid component. For example, using a [Plug-In](/v1/docs/plug-in-component) component to retrieve data from a reference Data Collection. Then, using a Data Workflow component to output the data to the Dynamic Grid component. - Importing data from another component, like a [Data Table](/v1/docs/data-table-component) component, using the Data Reference Key option. The grid (the Dynamic Grid component's front-end) populates with the data stored under the Data Reference Key. It's important to note that, in this case, the grid is read-only. Whenever data entry takes place, ensuring the integrity of your data is important. That's why the Dynamic Grid component provides a strong validation framework. When configuring your Dynamic Grid component, you’ll assign each column a column type. For example, a [Number](/v1/docs/dynamic-grid-component#UD_Number), [Text Field](/v1/docs/dynamic-grid-component#UD_Text_Field), or [Checkbox](/v1/docs/dynamic-grid-component#UD_Checkbox). Having defined column types means your end-user can only enter values that match your data model. You can also set column-specific validation rules for even greater control. You'll find the Dynamic Grid component under the [Display & Layout](/v1/docs/display-layout-components) group to the left of the [Module Builder](/v1/docs/introduction-to-the-module-builder). ## About the Configuration Window > To learn more about general component settings, view our [General Component Settings](/v1/docs/general-component-settings) article. ## Display Panel ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Display_Settings_thumb_0_0(2).jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A41Z&se=2026-11-07T18%3A57%3A41Z&sr=c&sp=r&sig=zTskOG4QAEEK7nAylWezYQ8xYt9Tf6q4X2%2B4EmPegWw%3D) | Setting | Description | | --- | --- | | **Title** | The heading of the grid. The end-user sees this title at the top of the grid in Express View. > [!NOTE] > It's best practice to always include a title. To hide the title in Express View, set Hide Title to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A41Z&se=2026-11-07T18%3A57%3A41Z&sr=c&sp=r&sig=zTskOG4QAEEK7nAylWezYQ8xYt9Tf6q4X2%2B4EmPegWw%3D) **(ON)**. | | **Tooltip** | A short hint that displays when an end-user positions their cursor over the (**Tooltip**) icon. Tooltips can display across more than one line. The tooltip displays next to the title. | | **Helper Text** | A quick tip describing the expected inputs or how to use the grid. The Helper Text displays below the Dynamic Grid component's title in Express View. | | **Custom CSS Class** | Enter a Custom CSS Class to apply to your component. Custom CSS lets you maintain a consistent look and feel when the field or element is part of a template or multiple modules. Updated CSS styling applies to all components that reference this custom class name. | | **Grid Height** | Select how to set the maximum height of the grid. Options include the following: - **Define Fixed Height by Unit**: Define the grid height in pixels. - **Define Height by Number of Records**: Specify the number of records to show before enabling scrolling. - **Auto Height**: The grid height scales to show all records. > [!NOTE] > Enabling Auto Height negatively impacts performance when displaying a large number of records (greater than 500). | | **Set Grid Height** | Set the height of your grid. The unit depends on your Grid Height setting selection. - **Define Fixed Height by Unit**: Enter the grid height in pixels. Grid height must be between 93 and 20,211 pixels. By default, the grid height is set to 600 pixels. - **Define Height by Number of Records**: Enter the number of records to show before enabling scrolling. Grid height must be between 1 and 480 records. By default, the grid height is set to 15 records. | | **Hide Component** | Shows or hides the component from view. Setting the Hide Field to ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(43).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A41Z&se=2026-11-07T18%3A57%3A41Z&sr=c&sp=r&sig=zTskOG4QAEEK7nAylWezYQ8xYt9Tf6q4X2%2B4EmPegWw%3D) (**checked**) hides the component in Express View. Setting it to ☐ (**unchecked**) displays the component. The component is always visible in the Module Builder. By default, Hide Component is set to ☐ (**unchecked**). | | **Hide Title** | Setting the Hide Title toggle to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A41Z&se=2026-11-07T18%3A57%3A41Z&sr=c&sp=r&sig=zTskOG4QAEEK7nAylWezYQ8xYt9Tf6q4X2%2B4EmPegWw%3D) **(ON)** stops the title from displaying in Express View. The title still displays in the Module Builder. By default, Hide Title is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A41Z&se=2026-11-07T18%3A57%3A41Z&sr=c&sp=r&sig=zTskOG4QAEEK7nAylWezYQ8xYt9Tf6q4X2%2B4EmPegWw%3D) **(OFF)**. | | **Customize Add Row Button** | When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A41Z&se=2026-11-07T18%3A57%3A41Z&sr=c&sp=r&sig=zTskOG4QAEEK7nAylWezYQ8xYt9Tf6q4X2%2B4EmPegWw%3D) **(ON)**, you can customize the appearance of the default Add Row button shown in Express View. By default, Customize Add Row Button is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A41Z&se=2026-11-07T18%3A57%3A41Z&sr=c&sp=r&sig=zTskOG4QAEEK7nAylWezYQ8xYt9Tf6q4X2%2B4EmPegWw%3D) **(OFF)**. | | **Button Label Text** | The Button's Label Text tells your end-user what the button does before they click it. This text shows in the button itself. By default, the Button Label Text is Add Row. | | **Button Style** | Sets the visual appearance of the button. Options include: `Primary`, `Secondary`, `Success`, `Danger`, `Warning`, `Info`, `Light`, `Dark`, and `Link`. The Button Style only affects the Button component's appearance and does not effect its function. | | **Custom CSS Class** | Enter a Custom CSS Class to apply to the Add Row button. When you update the CSS styling, it applies to all elements that reference this custom class name. | | **Left/Right Icon** | Use these fields to add icons (glyphs) to the left or right of your Button's Label Text. For example, entering glyphicon glyphicon-pencil adds an icon of a pencil to your Button. > The full list of supported GLYPHICONS® glyph codes is available here: [https://getbootstrap.com/docs/3.3/components/](https://getbootstrap.com/docs/3.3/components/). | ## Data Panel ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Data_Settings_thumb_0_0(1).jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A41Z&se=2026-11-07T18%3A57%3A41Z&sr=c&sp=r&sig=zTskOG4QAEEK7nAylWezYQ8xYt9Tf6q4X2%2B4EmPegWw%3D) | Setting | Description | | --- | --- | | **Data Reference Key** | The Data Reference Key setting lets you use the Dynamic Grid component to display data owned by another component. The referenced component is the sole source and owner of the data. So, your end-user can't edit this data, even if Editable is selected in the Column Setup table. To import data using a Data Reference Key, enter the Property ID of the component that you're pulling data from. > [!NOTE] > When importing data using a Data Reference Key, the source data's structure must match how the Dynamic Grid component stores data. Column schemas, including Property IDs and data types, must also match between the data source and the Dynamic Grid's Column Setup table. You can learn more about how the Dynamic Grid component stores and structures data in the [Structure of a Dynamic Grid Component's Data](/v1/docs/dynamic-grid-component#Structur) section. | ### Column Setup This is where you create your grid. Each new row in the Column Setup table becomes a column in your grid in Express View. Click **Add Column** to add a new row to the Column Setup table. > [!NOTE] > The top-to-bottom order of rows in your Column Setup table reflects the left-to-right order of columns in your grid in Express View. After adding a column, click the **Edit** button to see the following options: | **Setting** | Description | | --- | --- | | **Header Label** | Enter a label for the column's header in Express View. For the Button column type, the Header Label also acts as the button label. | | **Property ID*** | Enter a Property ID to associate with the column's data. This Property ID is functionally similar to a component's Property ID. For example, you can reference a column's Property ID to target that column in logic-based configurations. When inline editing is enabled, values entered in the column in Express View store under this Property ID (key) in the submission data. Property IDs use camel case (stylized as camelCase) without spaces or punctuation. You can use the same column Property IDs between different Dynamic Grid components. For instance, you can have **columnA** and **columnB** in two different Dynamic Grid components without affecting functionality. *The Property ID field is required. > [!NOTE] > When importing data from another source, the Property ID must match the key under which the column's data is stored in the data source. | | **Type** | Select a column type. This selection restricts the type of data your end-user can input, or the type of interaction they can have. The column type options include the following: - Text Field - Number - Checkbox - Single-select Dropdown - Multi-select Dropdown - Button - Date A column type is required. You can only select one type option per column. > [!TIP] > Each column type has its own unique column type configuration window. See the [Column Type Configuration Windows](/v1/docs/dynamic-grid-component#Column) section for details on each column type's configuration window. > [!NOTE] > When importing data from another source, the column type must match the type of data stored under that column in the data source. For example, using a Number column type for numeric data. | | **Editable** | When set to ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(43).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A41Z&se=2026-11-07T18%3A57%3A41Z&sr=c&sp=r&sig=zTskOG4QAEEK7nAylWezYQ8xYt9Tf6q4X2%2B4EmPegWw%3D) (**checked**), end-users can edit cells in this column in Express View. Use this setting to enable inline editing and data entry. Select the Editable checkbox in the column header to set all columns of the grid as editable. Or, use the Editable checkbox in each row to selectively set that column of the grid as editable. > [!NOTE] > Row group cells are only editable if the original row group column is made editable. The grouped parent row, however, is not editable. | | **Store Data** | When set to (**checked**), values entered in this column in Express View store to the database. Select the Store Data checkbox in the column header to set all columns of the grid to store to the database. Or, use the Store Data checkbox in each row to selectively store data from that column of the grid. > [!NOTE] > You must store all data to the database to use server-side execution. | | **Hidden** | When set to (**checked**), the column is hidden from view in Express View. Select the Hidden checkbox in the column header to set all columns of the grid as hidden. Or, select the Hidden checkbox in each row to selectively set that column of the grid as hidden. | | **Type** | Choose the column type. Available column types include the following: - Text Field - Number - Checkbox - Single-Select Dropdown - Multi-Select Dropdown - Button - Date | ### Column Type Configuration Windows Each column type option in the Column Setup table has a unique configuration window. From there, you can control column-specific display, data, action, and validation settings. > [!NOTE] > To access the column type configuration window, click the (**Column Settings**) button in the Column Setup table. To exit the column type configuration window, click **Back to Table**. Click on a column type in the list below to see its individual settings: ## Text Field Column Type The Text Field column type lets your end-user input short text values. Values store as strings. ### Display Settings #### Global Behavior Group ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/textField_display_thumb_0_0(1).jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A41Z&se=2026-11-07T18%3A57%3A41Z&sr=c&sp=r&sig=zTskOG4QAEEK7nAylWezYQ8xYt9Tf6q4X2%2B4EmPegWw%3D) | Setting | Description | | --- | --- | | **Allow For Text Wrapping** | When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A41Z&se=2026-11-07T18%3A57%3A41Z&sr=c&sp=r&sig=zTskOG4QAEEK7nAylWezYQ8xYt9Tf6q4X2%2B4EmPegWw%3D) **(ON)**, text in a column wraps to the next line below if the text exceeds column header length. If **Set column widths** is set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A41Z&se=2026-11-07T18%3A57%3A41Z&sr=c&sp=r&sig=zTskOG4QAEEK7nAylWezYQ8xYt9Tf6q4X2%2B4EmPegWw%3D) **(ON)**, headers and text wrap to the next line after reaching a column's specified unit length. > [!TIP] > To learn more about the Set column widths setting, see the [Arrange Data Group](/v1/docs/dynamic-grid-component#Arrange) section in this article. | #### Freeze Columns To Left Or Right Of The Grid | **Setting** | Description | | --- | --- | | **Freeze Column** | When ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(43).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A41Z&se=2026-11-07T18%3A57%3A41Z&sr=c&sp=r&sig=zTskOG4QAEEK7nAylWezYQ8xYt9Tf6q4X2%2B4EmPegWw%3D) (**checked**), displays the Column placement setting. Freezing a column moves the column's visible location to the edge of the grid and remains visible when scrolling horizontally. | | **Column Placement** | Select which side of the grid to pin the column against. Frozen, grouped columns remain in place while other columns scroll around them. Options include the following: - **Left side of grid**: Freezes the column to the left side of the grid. The frozen column remains visible when horizontally scrolling. This is the default option. - **Right side of grid**: Freezes the column to the right side of the grid. The frozen column remains visible when horizontally scrolling. > [!NOTE] > Add Row edit order begins with the first column under Column Setup. When freezing the first column to the right of the grid, it is still the first editable field when an end-user adds and edits a new row. | #### Columns | Setting | Description | | --- | --- | | **Custom CSS Class** | Enter a Custom CSS Class to apply to the column's cells. When you update the CSS styling, it applies to all elements that reference this custom class name. | #### Header | Setting | Description | | --- | --- | | **Tooltip** | A short hint that displays when an end-user positions their cursor over the (**Tooltip**) icon. Tooltips can display across more than one line. | | **Custom CSS Class** | Enter a Custom CSS Class to apply to the column's header. When you update the CSS styling, it's applied to all elements that reference this custom class name. | ### Actions Settings #### Triggers ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/textField_actions_thumb_0_0(1).jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A41Z&se=2026-11-07T18%3A57%3A41Z&sr=c&sp=r&sig=zTskOG4QAEEK7nAylWezYQ8xYt9Tf6q4X2%2B4EmPegWw%3D)                
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    
                                   

Setting

                               		                                    

Description

                               
                                   

Add

                               		                                    

Click to create a new trigger. Triggers let you create if/then rules to trigger components when a specified action occurs.

                               
                                   

When...

                               		                                    

Select an action to wait for in order to fire the trigger. The drop-down's options are:

                                   
                                           
  •                                            

    Column is Edited: Fires the trigger when the end-user edits the column.

                                           
    •                                        
  •                                            

    Value is Clicked: Fires the trigger when the end-user clicks any cell in the column.

                                           
    •                                    
                                   
                                       

When a column uses a Value is Clicked trigger, all values in the column use a hyperlink style (blue, underlined text).

                                   
                               
                                   

Then...

                               		                                    

Enter the Property ID of the component to trigger when the specified When... action occurs.

                               
                                   

Clear

                               		                                    

Removes all triggers.

                               
               
            ### Validations Settings #### Column Values Required Group | Setting | Description | | --- | --- | | Required | When set to ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(43).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A41Z&se=2026-11-07T18%3A57%3A41Z&sr=c&sp=r&sig=zTskOG4QAEEK7nAylWezYQ8xYt9Tf6q4X2%2B4EmPegWw%3D) (**checked**), the end-user must enter a value in the column before navigating ahead or saving the module. Set to ☐ (**unchecked**) when an entry is optional. By default, the Required setting is set to ☐ (**unchecked**). | | **Error Message** | Displays as a custom error message when the end-user doesn't enter a value under a required column. | #### Allowed Characters for Column Values Group | Setting | Description | | --- | --- | | **Set Minimum** | Sets the minimum number of characters that an end-user must enter for valid input. | | **Minimum Length Error Message** | A custom error message that displays when the entry doesn't meet the minimum character length rule. | | **Set Maximum** | Sets the maximum number of characters that an end-user must enter for valid input. | | **Maximum Length Error Message** | A custom error message that displays when the entry doesn't meet the maximum character length rule. | ## Number Column Type The Number column type lets your end-user input numbers, including integers and decimals. Entered values store as numbers. ### Display Settings #### Freeze Columns To Left Or Right Of The Grid | Setting | Description | | --- | --- | | **Freeze Column** | When (**checked**), displays the Column placement setting. Freezing a column moves the column's visible location to the edge of the grid and remains visible when scrolling horizontally. | | **Column Placement** | Select which side of the grid to pin the column against. Frozen, grouped columns remain in place while other columns scroll around them. Options include the following: - **Left side of grid**: Freezes the column to the left side of the grid. The frozen column remains visible when horizontally scrolling. This is the default option. - **Right side of grid**: Freezes the column to the right side of the grid. The frozen column remains visible when horizontally scrolling. > [!NOTE] > Add Row edit order begins with the first column under Column Setup. When freezing the first column to the right of the grid, it is still the first editable field when an end-user adds and edits a new row. | #### Columns | Setting | Description | | --- | --- | | **Custom CSS Class** | Enter a Custom CSS Class to apply to the column's cells. When you update the CSS styling, it applies to all elements that reference this custom class name. | | **Format** | Select how to format values in Express View. Options include: - **Number**: Value shows as entered. - **Percentage (%)**: Value shows as a percentage. For example, an input of 4 shows as 400%. > [!NOTE] > This setting only affects how the number shows in Express View. Values store as the value entered. | | **Decimal Places** | Enter the number of decimal places to show in Express View. Values of 13 digits or more round to the number of decimal places specified. > [!NOTE] > This setting only affects how the number shows in Express View. Values store as the value entered unless the number is 14 digits or more in length. Regardless if you use this field or not, these long numbers round up. For example, 999999999999999.599 rounds to 999999999999999.60. | | Show Thousands Separator | Set whether to show a thousands separator. The default thousands separator is a comma. When set to (**checked**), a thousands separator shows. By default, the Show Thousands Separator toggle is set to ☐ (**unchecked**). > [!NOTE] > This setting only affects how the number shows in Express View. Values store as the value entered. | #### Headers | Setting | Description | | --- | --- | | **Tooltip** | A short hint that displays when an end-user positions their cursor over the (**Tooltip**) icon. Tooltips can display across more than one line. | | **Custom CSS Class** | Enter a Custom CSS Class to apply to the column's header. When you update the CSS styling, it's applied to all elements that reference this custom class name. | ### Actions Settings #### Triggers | Setting | Description | | --- | --- | | Add | Click to create a new trigger. Triggers let you create if/then rules to trigger components when a specified action occurs. | | When... | Select an action to wait for in order to fire the trigger. The drop-down's options are: - **Column is Edited**: Fires the trigger when the end-user edits the column. - **Value is Clicked**: Fires the trigger when the end-user clicks any cell in the column. > [!NOTE] > When a column uses a Value is Clicked trigger, all values in the column use a hyperlink style (blue, underlined text). | | Then... | Enter the Property ID of the component to trigger when the specified **When...** action occurs. | | Clear | Removes all triggers. | ### Validations Settings #### Column Values Required | Setting | Description | | --- | --- | | Required | When set to (**checked**), the end-user must enter a value in the column before navigating ahead or saving the module. Set to ☐ (**unchecked**) when an entry is optional. By default, the Required setting is set to ☐ (**unchecked**). | | **Error Message** | Displays as a custom error message when the end-user doesn't enter a value under a required column. | #### Allowed Characters for Column Values | Setting | Description | | --- | --- | | **Set Minimum** | Sets the minimum value that an end-user must enter for valid input. | | **Minimum Error Message** | A custom error message that displays when the entry doesn't meet the minimum value rule. | | **Set Maximum** | Sets the maximum value that an end-user must enter for valid input. | | **Maximum Error Message** | A custom error message that displays when the entry doesn't meet the maximum value rule. | ## Checkbox Column Type The Checkbox column type adds a single checkbox to each row of the grid. In Express View, checking the box changes the Boolean value from false to true. ### Display Settings #### Freeze Columns to Left or Right of The Grid | Setting | Description | | --- | --- | | Freeze Column | When (**checked**), displays the Column placement setting. Freezing a column moves the column's visible location to the edge of the grid and remains visible when scrolling horizontally. | | **Column Placement** | Select which side of the grid to pin the column against. Frozen, grouped columns remain in place while other columns scroll around them. Options include the following: - **Left side of grid**: Freezes the column to the left side of the grid. The frozen column remains visible when horizontally scrolling. This is the default option. - **Right side of grid**: Freezes the column to the right side of the grid. The frozen column remains visible when horizontally scrolling. > [!NOTE] > Add Row edit order begins with the first column under Column Setup. When freezing the first column to the right of the grid, it is still the first editable field when an end-user adds and edits a new row. | #### Columns | Setting | Description | | --- | --- | | **Custom CSS Class** | Enter a Custom CSS Class to apply to the column's cells. When you update the CSS styling, it applies to all elements that reference this custom class name. | #### Header | Setting | Description | | --- | --- | | **Tooltip** | A short hint that displays when an end-user positions their cursor over the (**Tooltip**) icon. Tooltips can display across more than one line. | | **Custom CSS Class** | Enter a Custom CSS Class to apply to the column's header. When you update the CSS styling, it's applied to all elements that reference this custom class name. | ### Data Settings | Setting | Description | | --- | --- | | Column is Checked by Default | When set to (**checked**), the checkbox is selected by default in Express View. | ### Actions Settings #### Triggers | Setting | Description | | --- | --- | | Add | Click to create a new trigger. Triggers let you create if/then rules to trigger components when a specified action occurs. | | When... | Select an action to wait for in order to fire the trigger. The drop-down's options are: - **Column is Edited**: Fires the trigger when the end-user edits the column. - **Value is Clicked**: Fires the trigger when the end-user clicks any cell in the column. > [!NOTE] > When a column uses a Value is Clicked trigger, all values in the column use a hyperlink style (blue, underlined text). | | Then... | Enter the Property ID of the component to trigger when the specified **When...** action occurs. | | Clear | Removes all triggers. | ### Validation Panel #### Column Value Required | Setting | Description | | --- | --- | | Required | When set to (**checked**), the end-user must select the checkbox (value of true) for the cell to be valid. When set to ☐ (**unchecked**), the cell is valid whether selected or not (value of true or false is valid). By default, the Required toggle is set to ☐ (**unchecked**). | | **Error Message** | Displays as a custom error message when the end-user doesn't enter a value under a required column. | ## Single-Select Dropdown Column Type The Single-Select Dropdown column type adds a drop-down to each row of the grid. Your end-user can select one value from the drop-down. The selected value stores as a string. ### Display Settings #### Freeze Columns to Left or Right of The Grid | Setting | Description | | --- | --- | | Freeze Column | When (**checked**), displays the Column placement setting. Freezing a column moves the column's visible location to the edge of the grid and remains visible when scrolling horizontally. | | **Column Placement** | Select which side of the grid to pin the column against. Frozen, grouped columns remain in place while other columns scroll around them. Options include the following: - **Left side of grid**: Freezes the column to the left side of the grid. The frozen column remains visible when horizontally scrolling. This is the default option. - **Right side of grid**: Freezes the column to the right side of the grid. The frozen column remains visible when horizontally scrolling. > [!NOTE] > Add Row edit order begins with the first column under Column Setup. When freezing the first column to the right of the grid, it is still the first editable field when an end-user adds and edits a new row. | #### Column Group | Setting | Description | | --- | --- | | **Custom CSS Class** | Enter a Custom CSS Class to apply to the column's cells. When you update the CSS styling, it applies to all elements that reference this custom class name. | #### Header Group | Setting | Description | | --- | --- | | **Tooltip** | A short hint that displays when an end-user positions their cursor over the (**Tooltip**) icon. Tooltips can display across more than one line. | | **Custom CSS Class** | Enter a Custom CSS Class to apply to the column's header. When you update the CSS styling, it's applied to all elements that reference this custom class name. | ### Data Settings Use the data panel to populate the drop-down's values. #### Source Type There are two different methods that you can use to populate your Single-Select Dropdown: Values or Data Reference Key. ##### Values Values is the simplest way to populate the Single-Select Dropdown. Selecting Values shows a table where you can enter each option label along with its value to store. | Setting | Description | | --- | --- | | **Label** | Each option needs an end-user-facing label describing the choice that it represents. Enter your Option Labels using this column. After you create an option, another row displays for you to create the next option. | | **Value** | Each option needs an associated value to store in the . Enter the values to store in submission data using this column. By default, the value is a camel case version of the Option Label. You can also assign a numeric value to each option for use in logic-based configurations. | ##### Data Reference Key With Data Reference Key, you can use data from another component to fill your Single-Select Dropdown. You'll most often do this with a Data Table component. You'll add your option values and labels to separate columns of the Data Table then reference the Data Table's Property ID in the Data Reference Key setting. | Setting | Description | | --- | --- | | Data Reference Key | Enter the Property ID of the component whose data you're referencing. | | Value Property | Enter the key under which the option values are stored. If you're pulling from a Data Table component, enter the header of the values column in this field. | | Label Property | Enter the key under which the option labels are stored. If you're pulling from a Data Table component, enter the header of the labels column in this field. | ### Actions Settings | Setting | Description | | --- | --- | | Add | Click to create a new trigger. Triggers let you create if/then rules to trigger components when a specified action occurs. | | When... | Select an action to wait for in order to fire the trigger. The drop-down's options are: - **Column is Edited**: Fires the trigger when the end-user edits the column. - **Value is Clicked**: Fires the trigger when the end-user clicks any cell in the column. > [!NOTE] > When a column uses a Value is Clicked trigger, all values in the column use a hyperlink style (blue, underlined text). | | Then... | Enter the Property ID of the component to trigger when the specified **When...** action occurs. | | Clear | Removes all triggers. | ### Validation Settings #### Column Value Required | Setting | Description | | --- | --- | | Required | When set to (**checked**), the end-user must enter a value in the column before navigating ahead or saving the module. Set to ☐ (**unchecked**) when an entry is optional. By default, the Required setting is set to ☐ (**unchecked**). | | **Error Message** | Displays as a custom error message when the end-user doesn't enter a value under a required column. | ## Multi-Select Dropdown Column Type The Multi-Select Dropdown column type adds a drop-down to each row of the grid. Your end-user can select one or many values from the drop-down. The selected value(s) store as an array of string values. ### Display Settings #### Freeze Columns to Left or Right of The Grid | **Setting** | Description | | --- | --- | | **Freeze Column** | When (**checked**), displays the Column placement setting. Freezing a column moves the column's visible location to the edge of the grid and remains visible when scrolling horizontally. | | **Column Placement** | Select which side of the grid to pin the column against. Frozen, grouped columns remain in place while other columns scroll around them. Options include the following: - **Left side of grid**: Freezes the column to the left side of the grid. The frozen column remains visible when horizontally scrolling. This is the default option. - **Right side of grid**: Freezes the column to the right side of the grid. The frozen column remains visible when horizontally scrolling. > Add Row edit order begins with the first column under Column Setup. When freezing the first column to the right of the grid, it is still the first editable field when an end-user adds and edits a new row.× | #### Columns | Setting | Description | | --- | --- | | **Custom CSS Class** | Enter a Custom CSS Class to apply to the column's cells. When you update the CSS styling, it applies to all elements that reference this custom class name. | #### Header | Setting | Description | | --- | --- | | **Tooltip** | A short hint that displays when an end-user positions their cursor over the (**Tooltip**) icon. Tooltips can display across more than one line. | | **Custom CSS Class** | Enter a Custom CSS Class to apply to the column's header. When you update the CSS styling, it's applied to all elements that reference this custom class name. | ### Data Settings #### Source Type There are two different methods that you can use to populate your Multi-Select Dropdown: Values or Data Reference Key. ##### Values Values is the simplest way to populate the Multi-Select Dropdown. Selecting Values shows a table where you can enter each option label along with its value to store. | Setting | Description | | --- | --- | | Option Label | Each option needs an end-user-facing label describing the choice that it represents. Enter your Option Labels using this column. After you create an option, another row displays for you to create the next option. | | Data Source Value | Each option needs an associated value to store in the . Enter the values to store in submission data using this column. By default, the value is a camel case version of the Option Label. You can also assign a numeric value to each option for use in logic-based configurations. | ##### Data Reference Key With Data Reference Key, you can use data from another component to fill your Multi-Select Dropdown. You'll most often do this with a Data Table component. You'll add your option values and labels to separate columns of the Data Table then reference the Data Table's Property ID in the Data Reference Key setting. | Setting | Description | | --- | --- | | Data Reference Key | Enter the Property ID of the component whose data you're referencing. | | Value Property | Enter the key under which the option values are stored. If you're pulling from a Data Table component, enter the header of the values column in this field. | | Label Property | Enter the key under which the option labels are stored. If you're pulling from a Data Table component, enter the header of the labels column in this field. | ### Actions Settings | Setting | Description | | --- | --- | | Add | Click to create a new trigger. Triggers let you create if/then rules to trigger components when a specified action occurs. | | When... | Select an action to wait for in order to fire the trigger. The drop-down's options are: - **Column is Edited**: Fires the trigger when the end-user edits the column. - **Value is Clicked**: Fires the trigger when the end-user clicks any cell in the column. > [!NOTE] > When a column uses a Value is Clicked trigger, all values in the column use a hyperlink style (blue, underlined text). | | Then... | Enter the Property ID of the component to trigger when the specified **When...** action occurs. | | Clear | Removes all triggers. | ### Validation Settings #### Column Values Required Group | Setting | Description | | --- | --- | | Required | When set to (**checked**), the end-user must enter a value in the column before navigating ahead or saving the module. Set to ☐ (**unchecked**) when an entry is optional. By default, the Required setting is set to ☐ (**unchecked**). | | **Error Message** | Displays as a custom error message when the end-user doesn't enter a value under a required column. | ## Button Column Type The Button column type adds a clickable button to each row of the grid. You can configure actions to occur on button-click, including deleting the row or triggering other components. No values store to the submission data for the Button column type. ### Display Settings #### Freeze Columns to Left or Right of The Grid | Setting | Description | | --- | --- | | Freeze Column | When (**checked**), displays the Column placement setting. Freezing a column moves the column's visible location to the edge of the grid and remains visible when scrolling horizontally. | | **Column Placement** | Select which side of the grid to pin the column against. Frozen, grouped columns remain in place while other columns scroll around them. Options include the following: - **Left side of grid**: Freezes the column to the left side of the grid. The frozen column remains visible when horizontally scrolling. This is the default option. - **Right side of grid**: Freezes the column to the right side of the grid. The frozen column remains visible when horizontally scrolling. > [!NOTE] > Add Row edit order begins with the first column under Column Setup. When freezing the first column to the right of the grid, it is still the first editable field when an end-user adds and edits a new row. | #### Column Group | Setting | Description | | --- | --- | | **Custom CSS Class** | Enter a Custom CSS Class to apply to the column's cells. When you update the CSS styling, it applies to all elements that reference this custom class name. | | Disable Button | Enables or disables all Buttons in the column. Setting the Disable Button to (**checked**) disables the column's buttons in Express View. The buttons remain visible but you can't click them. Setting it to ☐ (**unchecked**) enables the buttons. By default, Disable Button is set to ☐ (**unchecked**). The Disable Button setting affects all buttons in the column. To disable individual buttons, you can target individual cells using logic expressions. View our [Dynamic Grid: Targeted Logic and Referencing Syntax](/v1/docs/dynamic-grid-targeted-logic-and-referencing-syntax) article to learn more. > [!NOTE] > You can use a logic component to set Disable Buttons to (**checked**), if needed. | | Hide Buttons | Shows or hides the Button from view. Setting Hide Buttons to (**checked**) hides the Button in Express View. The column remains visible but empty in Express View. Setting it to ☐ (**unchecked**) makes the Button visible. By default, the Hide Buttons toggle is set to ☐ (**unchecked**). > [!NOTE] > You can use a logic component to set Hide Buttons to (**checked**), if needed. | | | | #### Header Group | Setting | Description | | --- | --- | | **Tooltip** | A short hint that displays when an end-user positions their cursor over the (**Tooltip**) icon. Tooltips can display across more than one line. | | **Custom CSS Class** | Enter a Custom CSS Class to apply to the column's header. When you update the CSS styling, it's applied to all elements that reference this custom class name. | ### Actions Settings | Setting | Description | | --- | --- | | **Button Style** | Sets the visual appearance of the button. Options include: Primary, Secondary, Success, Danger, Warning, Info, Light, Dark, and Link. The Button Style only affects the Button component's appearance and does not effect its function. | | **When Button is Clicked** | Select an action to trigger on button-click. The drop-down's options are: - **Delete Row**: Deletes the selected row from the grid. - **Custom Action**: Enter the Property ID of a component to trigger on button-click. > Use the Header Label setting of the Column Setup table to clearly label and define the button's action.× | ## Date Column Type The Date column type adds a field where your end-user can enter or select a date. You can add a Calendar View to the field, which enables a date picker. Entered or selected values store as a formatted string. > [!NOTE] > By default, dates store in ISO 8601 format, and include a timestamp of 00:00:00.000Z UTC (Coordinated Universal Time). ### Display Settings #### Freeze Columns to Left or Right of The Grid | Setting | Description | | --- | --- | | Freeze Column | When (**checked**), displays the Column placement setting. Freezing a column moves the column's visible location to the edge of the grid and remains visible when scrolling horizontally. | | **Column Placement** | Select which side of the grid to pin the column against. Frozen, grouped columns remain in place while other columns scroll around them. Options include the following: - **Left side of grid**: Freezes the column to the left side of the grid. The frozen column remains visible when horizontally scrolling. This is the default option. - **Right side of grid**: Freezes the column to the right side of the grid. The frozen column remains visible when horizontally scrolling. > [!NOTE] > Add Row edit order begins with the first column under Column Setup. When freezing the first column to the right of the grid, it is still the first editable field when an end-user adds and edits a new row. | #### Column Group | Setting | Description | | --- | --- | | **Custom CSS Class** | Enter a Custom CSS Class to apply to the column's cells. When you update the CSS styling, it applies to all elements that reference this custom class name. | | **Date Format** | Use this setting to change the format of the Placeholder Text or any dates selected in Calendar View. Possible values are m, d, y, and Y (use each value only once). For example, Ydm, ymd, or mY. Entering ymd results in a date format of YY/MM/DD. Entering Ymd results in a date format of YYYY/MM/DD. > [!NOTE] > This setting only affects how the date displays in Express View. Values store in ISO 8601 format. | | **Field Delimiter** | Delimiters show the breaks between the month, day, and year in a date. Common delimiters include a period (.), slash (/), or hyphen (-). By default, the Field Delimiter is set to /. > [!NOTE] > This setting only affects how the date shows in Express View. Values store in ISO 8601 format. | | Disable Automated Input Formatting | WHen (**checked**) to remove input formatting in Express View. By default, this setting is set to ☐ (**unchecked**). | | Enable Calendar View | When (**checked**), Date column cells show a calendar icon. When clicked, the date picker widget opens, letting the end-user pick a date in calendar view. By default, the Enable Calendar View toggle is set to (**checked**). | | **Display (+/-) Years in Dropdown** | Sets the maximum number of years available in the date picker widget. > [!NOTE] > This setting doesn't limit what the end-user can manually enter, only what years show in calendar view. | | Open Datepicker Automatically When Editing | When selected, the date picker widget automatically shows when the end-user selects a Date column cell to edit. When not selected, the end-user must click the calendar icon to open the date picker. By default, the Open Datepicker Automatically When Editing checkbox is not selected. | | **Display Years in Dropdown** | Set the amount of years to display when the Datepicker drop-down displays. | #### Header Group | Setting | Description | | --- | --- | | **Tooltip** | A short hint that displays when an end-user positions their cursor over the (**Tooltip**) icon. Tooltips can display across more than one line. | | **Custom CSS Class** | Enter a Custom CSS Class to apply to the column's header. When you update the CSS styling, it's applied to all elements that reference this custom class name. | ### Data Settings | Setting | Description | | --- | --- | | Store Date Only | Unqork stores all dates in ISO8601 format with or without the timestamp based on the Store Date Only setting. That means dates should always be passed in using logic components as either YYYY-MM-DDThh:mm:ss.sssZ or YYYY-MM-DD. When (**checked**), the system only stores the selected date. By default, Store Date Only is set to ☐ (**unchecked**). | ### Actions Settings | Setting | Description | | --- | --- | | Add | Click to create a new trigger. Triggers let you create if/then rules to trigger components when a specified action occurs. | | When... | Select an action to wait for in order to fire the trigger. The drop-down's options are: - **Column is Edited**: Fires the trigger when the end-user edits the column. - **Value is Clicked**: Fires the trigger when the end-user clicks any cell in the column. > [!NOTE] > When a column uses a Value is Clicked trigger, all values in the column use a hyperlink style (blue, underlined text). | | Then... | Enter the Property ID of the component to trigger when the specified **When...** action occurs. | | Clear | Removes all triggers. | ### Validations Settings #### Valid Date | Setting | Description | | --- | --- | | **Error Message** | Displays as a custom error message when the end-user enters an invalid date. | #### Column Required | Setting | Description | | --- | --- | | Required | When set to (**checked**), the end-user must enter a value in the column before navigating ahead or saving the module. Set to ☐ (**unchecked**) when an entry is optional. By default, the Required setting is set to ☐ (**unchecked**). | | **Error Message** | Displays as a custom error message when the end-user doesn't enter a value under a required column. | #### Valid Date Range for Column Values | Setting | Description | | --- | --- | | **Restricted To** | Restrict the range of acceptable dates your end-user can input. Available date restrictions include: - **None**: Shows all dates without restrictions. The end-user can pick any date in the future or the past. - **Future Only**: Only shows future dates. - **Past**: Only shows dates that fall in the past. - **Before a Date**: Only shows dates earlier than your chosen date. - **After a Date**: Only shows dates after your chosen date. - **Between Dates**: Only shows dates in your chosen date range. | | From | The From field shows on selection of the Between Dates date restriction. Using the radio buttons you can apply more restrictions (Exact Date, Relative Date, Now) to the start of your date range. - **Exact Date**: Lets you choose your date range's starting date using the Choose Date field. - **Relative (+/-)**: Lets you choose the number of days, months, or years relative to your chosen date. - **Now**: Applies the current date as your starting date. | | To | The To field shows on selection of the Between Dates date restriction. Using the radio buttons you can apply more restrictions (Exact Date, Relative Date, Now) to the start of your date range. - **Exact Date**: Lets you choose your date range's starting date using the Choose Date field. - **Relative (+/-)**: Lets you choose the number of days, months, or years relative to your chosen date. - **Now**: Applies the current date as your end date. | | Minimum Date | Shows on selection of the Between Dates date restriction. Set a minimum valid date. | | Minimum Error Message | Shows on selection of the Between Dates date restriction. Set a custom error message here that displays when the end-user sets a non-compliant date. | | Maximum Date | Shows on selection of the Future Only, Past, Before a Date, After a Date, or Between Dates date restrictions. Set a maximum valid date. | | Maximum Error Message | Shows on selection of the Future Only, Past, Before a Date, After a Date, or Between Dates date restrictions. Set a custom error message here, that displays when the end-user sets a non-compliant date. | ### Row Grouping #### Group Rows | Setting | Description | | --- | --- | | Add | Click to create a new row group. Click Add to create additional row groupings. | | **Property ID** | Enter the **Column Setup** Property ID to group by. | | **Sort Direction** | Select a sort order for your row grouping. The drop-down options are: - **Unsorted**: Rows under each group remain unsorted. - **Ascending**: Rows under each group sort in ascending (A-Z) order. - **Descending**: Rows under each group sort in descending (Z-A) order. | | ... | If there is more than one Group Row, organize the sort order. Click this button to reveal the following options: - **˄ Move Up**: Moves the group row up one position. - **˅ Move Down:** Moves the group row down one position. - **D****elete**: Removes the group row. | | Clear | Removes all group rows from the configuration. | | **Organize Row Groups Into** | The options in the drop-down include: - **Single Column**: Row groups show under a single column. By default, the column's header is Group. The Group header replaces the header of the column that the rows are grouped by. > [!NOTE] > You can only sort the first row of the grouping. - **Consolidated**: Row groups show under the next column header. Each group displays directly above that column's data. > [!NOTE] > To learn more about aggregation and pivoting, jump to the [User Affordances Group](/v1/docs/dynamic-grid-component#User) section. > [!NOTE] > Consolidated row grouping doesn't work with row aggregation and you can't sort row groups. - **Multi-Column**: Each row group shows in individual columns with unique headers. The header matches the header of the original column. > [!NOTE] > You can sort every row of the grouping individually. | | Show Original Row Grouped Columns | When set to (**checked**), row-grouped columns also show in the grid without any grouping applied. So, in addition to column data showing under the row-grouping column, the original column also shows in the grid. When set to ☐ (**unchecked**), row-grouped columns only show under the row-grouping column(s), as determined by the Organize Row Groups Into setting. | ### Expand Grouping | Setting | Description | | --- | --- | | Expand Group Rows Automatically | When set to (**checked**), displays group rows on page refresh. By default, this setting is set to ☐ (**unchecked**). | ## Actions Panel ### Triggers The Dynamic Grid component supports creating multiple triggers directly in the component's configuration window. You can choose from three possible triggering events for each trigger. You can also create several triggers that have the same triggering event. | Setting | Description | | --- | --- | | **Type** | Select an action to watch for in order to fire the triggers. All 3 trigger types fire only when an end-user action happens on the grid. So, if a logic component adds a row, the triggers don't fire. Instead, if an end-user clicks the Add Row button, the triggers fire. The drop-down's options are: - **Row is Added**: Fires the trigger when a new row is added to the table. - **Row is Deleted**: Fires the trigger when any row in the table is deleted. - **Row is Rearranged**: Fires the trigger when a row is moved and adjusted. - **Table/Row is Edited**: Fires the trigger when any row in the table is edited. | | **Target Property ID** | Enter the Property ID of the component to trigger when the specified **Type** action occurs. Click the (Search) icon to display a list of possible Property IDs. | | ... | If there is more than one Group Row, organize the sort order. Click this button to reveal the following options: - **˄ Move Up**: Moves the group row up one position. - **˅ Move Down:** Moves the group row down one position. - **D****elete**: Removes the group row. | | Add | Adds an addition trigger to the bottom of the **Triggers** list. | | Clear | Removes all triggers from the configuration. | ### User Affordances Group These settings determine how your end-user can interact with the grid and its data in Express View. When enabled, a Side Panel displays at the right of the grid. From the Side Panel, your end-user can use any enabled settings to perform analytic functions. Some interactions are also available from the grid's column headers. | Setting | Description | | --- | --- | | Allow User to Group Rows | When (**checked**), your end-user can group all data-based column types. This excludes the Button column type. Row grouping automatically groups data based on shared values and can be nested many times. > [!NOTE] > In the case of a Checkbox column type, the end-user sees checkbox values as text. For instance, end-users might see Checked (true) and Unchecked (false). This feature makes it easier when grouping and sifting through large amounts of data. By default, setting is ☐ (**unchecked**). | | Allow User to Aggregate & Pivot Across All Columns | When (**checked**), your end-user can perform aggregation and pivoting functions. When enabled, the Pivot Mode toggle shows in the Side Panel. Aggregation lets your end-user apply pre-defined functions to values. In order to see aggregated values, a row group must be applied or the Pivot Mode toggle must be (**checked**). The available aggregation actions vary by column type. For example: - **Text Field**: Count, First, Last. - **Number**: Avg, Sum, Min, Max, Count, First, Last. - **Date**: Count, First, Last, Min, Max. - **Checkbox**: Count, First, Last. - **Single-select Dropdown**: Count, First, Last. - **Multi-select Dropdown**: Count, First, Last. - **Button**: Not supported. Pivoting allows data to be extrapolated across another axis (Y-axis). Your end-user can pivot all data-based column types. This excludes the Button column type. To use Pivot Mode, the Pivot Mode toggle in the grid's Side Panel must be (**checked**). Enabling Pivot Mode temporarily hides tabular data, similar to creating a new Pivot Table instance in Excel. > [!NOTE] > For best results, also enable the Allow User to Group Rows setting when enabling the Allow User to Aggregate & Pivot Across All Columns setting. By default, Allow User to Group Rows is set to ☐ (**unchecked**). | | Allow User to Sort by Column | When (**checked**), end-users can sort column values. Clicking a column's header in the grid sorts the column's values in ascending order. Clicking the column's header again sorts the column's values in descending order. Clicking the column's header again removes the sort order. When sorted in ascending order, an **↑** (**Upwards Arrow**) icon shows in the column's header. When sorted in descending order, a **↓** (**Downwards Arrow**) icon shows in the column's header. By default, setting is ☐ (**unchecked**). | | Allow Multi-Column Sorting | When (**checked**), end-users can sort by multiple columns at the same time. Press and hold the **Shift** key when selecting additional column headers. Press and hold the **Shift** key when clicking a header to change the sort order. By default, setting is ☐ (**unchecked**). | | Allow User to Filter Columns | When (**checked**), end-users can filter column values. Each column header in the grid shows a (**Hamburger**) icon. When clicked, a column-specific Filter menu opens. The available filtering actions vary by column type. For example: - **Text Field**: Supports filtering by the available values in that column. - **Number**: Equals, Not equal, Less than, Less than or equals, Greater than, Greater than or equals, and In range. Also supports joining filters using the AND and OR radio buttons. - **Date**: Equals, Greater than, Less than, Not equal, In range. Also supports joining filters using the AND and OR radio buttons. - **Checkbox**: Unchecked (false), Checked (true), or Empty (undefined or null). - **Single-select Dropdown**: Supports filtering by the available values in that column. - **Multi-select Dropdown**: Supports filtering by the available values in that column. > [!NOTE] > For Multi-select Dropdown, filtering by value is interpreted as "any array that contains any of the selected values." For example, if filtering by "USA", both ["USA", "Canada"] and ["USA", "Canada", "Mexico"] match the filter criteria. - **Button**: Not supported. By default, this setting is (**checked**). | | Show Filter Panel | When selected, a Filter panel shows in the Side Panel. From the Side Panel, your end-user can apply column-specific filters. The available filtering actions vary by column type. By default, the Show Filter Panel checkbox is not selected. | | Allow User to Rearrange Rows | When (**checked**), end-users can rearrange rows in the grid. > [!NOTE] > If you enable row filtering, grouping, sorting, or aggregation and pivoting, the end-user cannot rearrange grid rows. Reordering rows in Express View affects the order in which rows store in the submission data, as well. By default, setting is ☐ (**unchecked**). | | Invoking Cell Edit State | Select how many times the end-user must click an editable cell in order to edit the cell. There are two options: - Allow user to invoke edit state upon double-click. - Allow user to invoke edit state upon single-click. | ## Validations Settings ### Required Group | Setting | Description | | --- | --- | | Require Minimum Valid Rows | When (**checked**), the end-user must enter at least one valid row in the grid before navigating ahead or saving the module. Set to ☐ (**unchecked**) when an entry is optional. > [!NOTE] > This setting respects column-level validation. If the end-user enters one row in the grid, but the row doesn't meet all column-level validations, the component-level validation criteria isn't met. By default, Require Minimum Valid Rows is set to ☐ (**unchecked**). | | **Error Message** | A custom error message that displays below a required field. The error message displays when the end-user tries to save or submit the module without completing the required field. | ### Set Number of Allowed Rows Group | Setting | Description | | --- | --- | | **Set Minimum** | Sets the minimum number of allowed rows in the grid. | | **Minimum Error Message** | An error message that displays when the grid doesn't meet the minimum number of rows set. | | **Set Maximum** | Sets the maximum number of allowed rows in the grid. | | **Maximum Error Message** | An error message that displays when the grid exceeds the maximum number of rows set. | ### Notes on Validation The Dynamic Grid component supports setting validation rules at several levels of the component. In addition to setting validation rules in the main configuration window and column type configuration windows, you can also use logic to set cell or row-level validation. For example, setting minimum or maximum number validation rules in specific rows of the grid. When editing a Dynamic Grid in Express View, visual cues and error messages highlight validation errors at all levels. When using server-side execution to inject data into a Dynamic Grid, though, you'll rely on the validationErrors array to identify errors. You can't display validationErrors in the front-end. > [!NOTE] > The Dynamic Grid component supports all standard server-side execution actions. The validationErrors array for a Dynamic Grid component has a different structure compared to some other components. Here's a basic overview of the structure: - Component-level validation errors follow the standard server-side execution validationErrors schema. - Cell-level and column-level validation errors are summarized by column. Column-specific errors have their own object in the validationErrors array, separate from component-level errors. - In each column-specific object of the validationErrors array is a failedValidations array. The failedValidations array summarizes errors in the column, by type. For example, minLength or required validation errors. Each group of type-specific errors has its own object in the array. - Each type-specific error object lists cell-level and column-level errors separately, as a celllevel errors array or columnlevel errors object. - The celllevel errors array contains one object per row of the column. This lets you know the exact column/row coordinates of the failed validation. - The columnlevel errors object lists all affected rows in the rows array. This again lets you know the exact column/row coordinates. - Error messages are also visible. The following code snippet shows a sample validationErrors array, from a server-side-executed Dynamic Grid component. The array shows component-level and cell-level validation errors. ```plaintext 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 "validationErrors": [ { "id": "dynamicGrid", "path": "data.dynamicGrid", "label": "dynamicGrid", "parent": "data", "message": "dynamicGrid is required" }, { "id": "dynamicGrid", "path": "data.dynamicGrid", "label": "dynamicGrid", "parent": "data", "message": "dynamicGrid must contain no more than 5 items" }, { "id": "dynamicGrid.fullName", "path": "data.dynamicGrid.fullName", "label": "Full Name", "parent": "data.dynamicGrid", "failedValidations": [ { "type": "minLength", "columnlevel": { "rows": [0, 1, 3], "message": "Full Name must be no less than 5 characters" } }, { "type": "required", "columnlevel": { "rows": [2, 5, 6], "message": "Full Name is required" } } ] }, { "id": "dynamicGrid.employeeNumber", "path": "data.dynamicGrid.employeeNumber", "label": "Employee Number", "parent": "data.dynamicGrid", "failedValidations": [ { "type": "min", "cellLevel": [ { "row": 0, "message": "Employee Number must be greater than or equal to 1" }, { "row": 1, "message": "Employee Number must be greater than or equal to 2" } ], "columnlevel": { "rows": [2, 3], "message": "Employee Number must be greater than or equal to 100" } }, { "type": "max", "columnlevel": { "rows": [4, 5, 6], "message": "Employee Number must be less than or equal to 999" } } ]}] ``` The Dynamic Grid component also includes built-in data type validations. These validations help ensure data in a given column type matches its intended data types. These validations don't prevent you from saving your module but help detect incorrect data types. The following error messages display for each Column Type when the data types are incorrect: - **Text Field**: No error messages display for the Text Field Column Type. - **Number**: Any value that isn't a number displays a **Not a Number** error message. - **Single-select Dropdown**: If you inject a value from a logic component that doesn't match the column’s Data Source Value or Value Property displays an **Invalid Option** error message. - **Multi-select Dropdown**: Any values that don't match the column’s Data Source Value or Value Property display an **Invalid Option** error message. - **Date**: Any value that isn't formatted as YYYY-MM-DDT00:00:00.000Z or YYYY-MM-DD displays a **Not a Date** error message. > [!NOTE] > The Date Column Type, like the Date Input component, has a Valid Date validation that often overrides this error for end-users anyway. - **Checkbox**: Any value that is not a **true** or **false** Boolean value displays a **Not a Boolean** error message. - **Button**: No error messages display for the Button Column Type. ## The **Dynamic Grid component** combines the ease and usability of a spreadsheet with the power and flexibility of an Unqork grid component. In Express View, your end-user gets a streamlined, spreadsheet-like data entry and exploration experience. Built with large-scale data sets in mind, use a Dynamic Grid to focus on supporting high-performance data consumption, analysis, and exploration use cases. Dynamic Grid also includes features like pivot mode, data aggregation and grouping, and more. You have various options for populating your Dynamic Grid component: - Inline editing and data entry in Express View. - Using a logic component to output data to the Dynamic Grid component. For example, using a [Plug-In](/v1/docs/plug-in-component) component to retrieve data from a reference Data Collection. Then, using a Data Workflow component to output the data to the Dynamic Grid component. - Importing data from another component, like a [Data Table](/v1/docs/data-table-component) component, using the Data Reference Key option. The grid (the Dynamic Grid component's front-end) populates with the data stored under the Data Reference Key. It's important to note that, in this case, the grid is read-only. Whenever data entry takes place, ensuring the integrity of your data is important. That's why the Dynamic Grid component provides a strong validation framework. When configuring your Dynamic Grid, you’ll assign each column a column type. For example, Number, Text Field, or Checkbox. Having defined column types means your end-user can only enter values that match your data model. You can also set column-specific validation rules for even greater control. ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/dynamicGrid_expressView_SidePanel_thumb_0_0(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A41Z&se=2026-11-07T18%3A57%3A41Z&sr=c&sp=r&sig=zTskOG4QAEEK7nAylWezYQ8xYt9Tf6q4X2%2B4EmPegWw%3D) You'll find the Dynamic Grid component under the [Display & Layout](/v1/docs/display-layout-components) group at the left of the [Module Builder](/v1/docs/introduction-to-the-module-builder). You have various options for populating your Dynamic Grid component: - Inline editing and data entry in Express View. - Using a logic component to output data to the Dynamic Grid component. For example, using a [Plug-In](/v1/docs/plug-in-component) component to retrieve data from a reference Data Collection. Then, using a Data Workflow component to output the data to the Dynamic Grid component. - Importing data from another component, like a [Data Table](/v1/docs/data-table-component) component, using the Data Reference Key option. The grid (the Dynamic Grid component's front-end) populates with the data stored under the Data Reference Key. It's important to note that, in this case, the grid is read-only. You'll find the Dynamic Grid component under the Display & Layout group at the left of the Module Builder. ## About the Configuration Window > [!TIP] > To learn more about general component settings, view our [General Component Settings](/v1/docs/general-component-settings) article. ## Display Panel ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/dynamicGrid_DisplayPanel_thumb_0_0(1).jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A41Z&se=2026-11-07T18%3A57%3A41Z&sr=c&sp=r&sig=zTskOG4QAEEK7nAylWezYQ8xYt9Tf6q4X2%2B4EmPegWw%3D) | Setting | Description | | --- | --- | | Title | The heading of the grid. The end-user sees this title at the top of the grid in Express View. > [!NOTE] > It's best practice to always include a title. To hide the title in Express View, set Hide Title to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A41Z&se=2026-11-07T18%3A57%3A41Z&sr=c&sp=r&sig=zTskOG4QAEEK7nAylWezYQ8xYt9Tf6q4X2%2B4EmPegWw%3D) **(ON)**. | | Tooltip | A short hint that displays when an end-user positions their cursor over the (**Tooltip**) icon. Tooltips can display across more than one line. The tooltip displays next to the title. | | Helper Text | A quick tip describing the expected inputs or how to use the grid. The Helper Text displays below the Dynamic Grid component's title in Express View. | | Custom CSS Class | Enter a Custom CSS Class to apply to your component. Custom CSS lets you maintain a consistent look and feel when the field or element is part of a template or multiple modules. Updated CSS styling applies to all components that reference this custom class name. | | Grid Height | Select how to set the maximum height of the grid. The options are: - **Define Fixed Height by Unit**: Define the grid height in pixels. - **Define Height by Number of Records**: Specify the number of records to show before enabling scrolling. - **Auto Height**: The grid height scales to show all records. > [!NOTE] > Enabling Auto Height negatively impacts performance when displaying a large number of records (greater than 500). | | Set Grid Height To | Set the height of your grid. The unit depends on your Grid Height setting selection. - **Define Fixed Height by Unit**: Enter the grid height in pixels. Grid height must be between 93 and 20,211 pixels. By default, the grid height is set to 600 pixels. - **Define Height by Number of Records**: Enter the number of records to show before enabling scrolling. Grid height must be between 1 and 480 records. By default, the grid height is set to 15 records. | | Hide Component | Displays or hides the component from view. Setting Hide Field to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A41Z&se=2026-11-07T18%3A57%3A41Z&sr=c&sp=r&sig=zTskOG4QAEEK7nAylWezYQ8xYt9Tf6q4X2%2B4EmPegWw%3D) **(ON)** hides the component in Express View. Setting it to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A41Z&se=2026-11-07T18%3A57%3A41Z&sr=c&sp=r&sig=zTskOG4QAEEK7nAylWezYQ8xYt9Tf6q4X2%2B4EmPegWw%3D) **(OFF)** displays the component. The component is always visible in the Module Builder. By default, Hide Field is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A41Z&se=2026-11-07T18%3A57%3A41Z&sr=c&sp=r&sig=zTskOG4QAEEK7nAylWezYQ8xYt9Tf6q4X2%2B4EmPegWw%3D) **(OFF)**. | | Hide Title | Setting the Hide Title toggle to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A41Z&se=2026-11-07T18%3A57%3A41Z&sr=c&sp=r&sig=zTskOG4QAEEK7nAylWezYQ8xYt9Tf6q4X2%2B4EmPegWw%3D) **(ON)** stops the title from displaying in Express View. The title still displays in the Module Builder. By default, Hide Title is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A41Z&se=2026-11-07T18%3A57%3A41Z&sr=c&sp=r&sig=zTskOG4QAEEK7nAylWezYQ8xYt9Tf6q4X2%2B4EmPegWw%3D) **(OFF)**. | | Customize 'Add Row' Button | When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A41Z&se=2026-11-07T18%3A57%3A41Z&sr=c&sp=r&sig=zTskOG4QAEEK7nAylWezYQ8xYt9Tf6q4X2%2B4EmPegWw%3D) **(ON)**, you can customize the appearance of the default Add Row button shown in Express View. By default, the Customize 'Add Row' Button toggle is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A41Z&se=2026-11-07T18%3A57%3A41Z&sr=c&sp=r&sig=zTskOG4QAEEK7nAylWezYQ8xYt9Tf6q4X2%2B4EmPegWw%3D) **(OFF)**. | | Button Label Text | The Button's Label Text tells your end-user what the button does before they click it. This text shows in the button itself. By default, the Button Label Text is Add Row. | | Button Style | Sets the visual appearance of the button. Options include: `Primary`, `Secondary`, `Success`, `Danger`, `Warning`, `Info`, `Light`, `Dark`, and `Link`. The Button Style only affects the Button component's appearance and does not effect its function. | | Custom CSS Class | Enter a Custom CSS Class to apply to the Add Row button. When you update the CSS styling, it applies to all elements that reference this custom class name. | | Left/Right Icon | Use these fields to add icons (glyphs) to the left or right of your Button's Label Text. For example, entering glyphicon glyphicon-pencil adds an icon of a pencil to your Button. > The full list of supported GLYPHICONS® glyph codes is available here: [https://getbootstrap.com/docs/3.3/components/](https://getbootstrap.com/docs/3.3/components/). | ## Data Panel ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/dynamicGrid_DataPanel_thumb_0_0(1).jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A41Z&se=2026-11-07T18%3A57%3A41Z&sr=c&sp=r&sig=zTskOG4QAEEK7nAylWezYQ8xYt9Tf6q4X2%2B4EmPegWw%3D) | Setting | Description | | --- | --- | | Data Reference Key | The Data Reference Key setting lets you use the Dynamic Grid component to display data owned by another component. The referenced component is the sole source and owner of the data. So, your end-user can't edit this data, even if Editable is selected in the Column Setup table. To import data using a Data Reference Key, enter the Property ID of the component that you're pulling data from. > [!NOTE] > When importing data using a Data Reference Key, the source data's structure must match how the Dynamic Grid component stores data. Column schemas, including Property IDs and data types, must also match between the data source and the Dynamic Grid's Column Setup table. You can learn more about how the Dynamic Grid component stores and structures data in the [Structure of a Dynamic Grid Component's Data](/v1/docs/dynamic-grid-component#Structur) section. | ### Column Setup Table This is where you create your grid. Each new row in the Column Setup table becomes a column in your grid in Express View. Click **+Add New Column** to add a new row to the Column Setup table. > [!NOTE] > The top-to-bottom order of rows in your Column Setup table reflects the left-to-right order of columns in your grid in Express View. > [!TIP] > You can easily rearrange the order of rows in your Column Setup table. Click and drag the (**Grip**) icon found at the left of each row in the Column Setup table. | **Setting** | Description | | --- | --- | | **Header Label** | Enter a label for the column's header in Express View. For the Button column type, the Header Label also acts as the button label. | | **Property ID** | Enter a Property ID to associate with the column's data. This Property ID is functionally similar to a component's Property ID. For example, you can reference a column's Property ID to target that column in logic-based configurations. When inline editing is enabled, values entered in the column in Express View store under this Property ID (key) in the submission data. Property IDs use camel case (stylized as camelCase) without spaces or punctuation. You can use the same column Property IDs between different Dynamic Grid components. For instance, you can have **columnA** and **columnB** in two different Dynamic Grid components without affecting functionality. The Property ID field is required. > [!NOTE] > When importing data from another source, the Property ID must match the key under which the column's data is stored in the data source. | | **Column Type** | Select a column type. This selection restricts the type of data your end-user can input, or the type of interaction they can have. The column type options are: - Text Field - Number - Checkbox - Single-select Dropdown - Multi-select Dropdown - Button - Date A column type is required and you can only select one type option per column. > [!NOTE] > When importing data from another source, the column type must match the type of data stored under that column in the data source. For example, using a Number column type for numeric data. > [!TIP] > Each column type has its own unique column type configuration window. See the [Column Type Configuration Windows](/v1/docs/dynamic-grid-component#Column) section for details on each column type's configuration window. | | **Editable** | When selected, end-users can edit cells in this column in Express View. Use this setting to enable inline editing and data entry. Select the Editable checkbox in the column header to set all columns of the grid as editable. Or, use the Editable checkbox in each row to selectively set that column of the grid as editable. > [!NOTE] > Row group cells are only editable if the original row group column is made editable. The grouped parent row, however, is not editable. | | **Store Data** | When selected, values entered in this column in Express View store to the database. Select the Store Data checkbox in the column header to set all columns of the grid to store to the database. Or, use the Store Data checkbox in each row to selectively store data from that column of the grid. > [!NOTE] > You must store all data to the database to use server-side execution. | | **Hidden** | When selected, the column is hidden from view in Express View. Select the Hidden checkbox in the column header to set all columns of the grid as hidden. Or, select the Hidden checkbox in each row to selectively set that column of the grid as hidden. | | **(****Column Settings Button)** | Shows in the actions column in each row of the Column Setup table. When clicked, opens the selected row's column type-specific configuration window. | | **(****Delete Button)** | Shows on hover-over of the actions column in each row of the Column Setup table. When clicked,deletes the selected row and its column. | ### Arrange Data Group The Arrange Data settings let you preemptively apply row groupings to your grid. To let your end-user choose whether to apply row groupings, use the User Affordances settings. | Setting | Description | | --- | --- | | Set Column Widths | Manually set the width for individual columns. When set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A41Z&se=2026-11-07T18%3A57%3A41Z&sr=c&sp=r&sig=zTskOG4QAEEK7nAylWezYQ8xYt9Tf6q4X2%2B4EmPegWw%3D) **(OFF)**, a column's minimum-width autosizes to `20` units. An autosized column's width then grows in proportion to the contents of the column. For example, a column titled **Age** is `20 units (minimum-width) + 3 units (1 unit per letter character) = 23 units`. Default is ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A41Z&se=2026-11-07T18%3A57%3A41Z&sr=c&sp=r&sig=zTskOG4QAEEK7nAylWezYQ8xYt9Tf6q4X2%2B4EmPegWw%3D) **(OFF)**. | | (Set Column Width Settings Button) | Opens the **Set column widths** configuration panel. When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A41Z&se=2026-11-07T18%3A57%3A41Z&sr=c&sp=r&sig=zTskOG4QAEEK7nAylWezYQ8xYt9Tf6q4X2%2B4EmPegWw%3D) **(ON)**, displays the **Define width by units** table with the following columns: - **Header Label**: The name of the column defined in **Header Label** under **Column Setup**. - **Units**: The width of the column in units. A unit is the size of a single character (letter, number, or symbol). Unit value range is between `0` and `1000`, default is `10`. Set a column's width to 0 units to autosize only that column. > [!NOTE] > If there are no columns, the Define width by units table does not display. | | + Add Column to Group By | Click to create a new row group. Click **+ Group By Another Column** to create additional row groupings. > [!NOTE] > To delete a row group, click the **X** button found at the right of the Sort Order drop-down. > [!TIP] > The top-to-bottom order of row groups determines nesting. To rearrange row groups, click and drag a row group's (**Grip**) icon. | | Column Drop-down | Select a column to group rows by. The column must exist in the Column Setup table to show in the drop-down list. > [!NOTE] > The column list reflects the Header Labels assigned in the Column Setup table. | | Sort Order Drop-down | Select a sort order for your row grouping. The drop-down options are: - **Unsorted**: Rows under each group remain unsorted. - **Ascending**: Rows under each group sort in ascending (A-Z) order. - **Descending**: Rows under each group sort in descending (Z-A) order. | | Organize Row Groups Into | The options include: - **Single Column**: Row groups show under a single column. By default, the column's header is Group. The Group header replaces the header of the column that the rows are grouped by. > [!NOTE] > You can only sort the first row of the grouping. - **Consolidated**: Row groups show under the next column header. Each group displays directly above that column's data. > [!TIP] > To learn more about aggregation and pivoting, jump to the [User Affordances Group](/v1/docs/dynamic-grid-component#User) section. > [!NOTE] > Consolidated row grouping doesn't work with row aggregation and you can't sort row groups. - **Multi-Column**: Each row group shows in individual columns with unique headers. The header matches the header of the original column. > [!NOTE] > You can sort every row of the grouping individually. | | Repeat Row Grouped Value in Each Row | Visible when Organize Row Groups Into is set to Single Column or Multi-Column. When selected, the row-grouped value shows in each row of the row grouping. So, when expanding a row grouping, each row in the grouping still shows the value shared between each row. When not selected, the cell is blank. The shared value only displays in the top-level grouping. | | Show Original Row Grouped Columns | When selected, row-grouped columns also show in the grid without any grouping applied. So, in addition to column data showing under the row-grouping column, the original column also shows in the grid. When not selected, row-grouped columns only show under the row-grouping column(s), as determined by the Organize Row Groups Into setting. | ## Column Type Configuration Windows Each column type option in the Column Setup table has a unique configuration window. From there, you can control column-specific display, data, action, and validation settings. > [!NOTE] > To access the column type configuration window, click the (**Column Settings**) button in the Column Setup table. To exit the column type configuration window, click **Back to Table**. > [!TIP] > Click a column type heading below to expand the drop-down and show the configuration window description. ## Text Field Column Type The Text Field column type lets your end-user input short text values. Values store as strings. ### Display Settings #### Global Behavior Group | Setting | Description | | --- | --- | | Allow Text Wrapping | When set to (ON), text in a column wraps to the next line below if the text exceeds column header length. If **Set column widths** is set to (ON), headers and text wrap to the next line after reaching a column's specified unit length. > [!TIP] > To learn more about the Set column widths setting, see the [Arrange Data Group](/v1/docs/dynamic-grid-component#Arrange) section in this article. | #### Freeze Columns to Left or Right of The Grid | Setting | Description | | --- | --- | | Freeze Column | When set to (ON), displays the Column placement setting. Freezing a column moves the column's visible location to the edge of the grid and remains visible when scrolling horizontally. | | Column Placement | Select which side of the grid to pin the column against. Frozen, grouped columns remain in place while other columns scroll around them. Options include the following: - **Left side of grid**: Freezes the column to the left side of the grid. The frozen column remains visible when horizontally scrolling. This is the default option. - **Right side of grid**: Freezes the column to the right side of the grid. The frozen column remains visible when horizontally scrolling. > [!NOTE] > Add Row edit order begins with the first column under Column Setup. When freezing the first column to the right of the grid, it is still the first editable field when an end-user adds and edits a new row. | #### Column Group | Setting | Description | | --- | --- | | Custom CSS Class | Enter a Custom CSS Class to apply to the column's cells. When you update the CSS styling, it applies to all elements that reference this custom class name. | #### Header Group | Setting | Description | | --- | --- | | Tooltip | A short hint that displays when an end-user positions their cursor over the (**Tooltip**) icon. Tooltips can display across more than one line. | | Custom CSS Class | Enter a Custom CSS Class to apply to the column's header. When you update the CSS styling, it's applied to all elements that reference this custom class name. | ### Actions Panel | Setting | Description | | --- | --- | | + Add Trigger | Click **+ Add Trigger** to create a new trigger. Triggers let you create if/then rules to trigger components when a specified action occurs. | | When... | Select an action to wait for in order to fire the trigger. The drop-down's options are: - **Column is Edited**: Fires the trigger when the end-user edits the column. - **Value is Clicked**: Fires the trigger when the end-user clicks any cell in the column. > [!NOTE] > When a column uses a Value is Clicked trigger, all values in the column use a hyperlink style (blue, underlined text). | | Then... | Enter the Property ID of the component to trigger when the specified **When...** action occurs. | ### Validation Panel #### Column Values Required Group | Setting | Description | | --- | --- | | Required | When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A41Z&se=2026-11-07T18%3A57%3A41Z&sr=c&sp=r&sig=zTskOG4QAEEK7nAylWezYQ8xYt9Tf6q4X2%2B4EmPegWw%3D) **(ON)**, the end-user must enter a value in the column before navigating ahead or saving the module. Set the toggle to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A41Z&se=2026-11-07T18%3A57%3A41Z&sr=c&sp=r&sig=zTskOG4QAEEK7nAylWezYQ8xYt9Tf6q4X2%2B4EmPegWw%3D) **(OFF)** when an entry is optional. By default, the Required toggle is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A41Z&se=2026-11-07T18%3A57%3A41Z&sr=c&sp=r&sig=zTskOG4QAEEK7nAylWezYQ8xYt9Tf6q4X2%2B4EmPegWw%3D) **(OFF)**. | | Error Message | Displays as a custom error message when the end-user doesn't enter a value under a required column. | #### Allowed Characters for Column Values Group | Setting | Description | | --- | --- | | Set Minimum | Sets the minimum number of characters that an end-user must enter for valid input. | | Minimum Length Error Message | A custom error message that displays when the entry doesn't meet the minimum character length rule. | | Set Maximum | Sets the maximum number of characters that an end-user must enter for valid input. | | Maximum Length Error Message | A custom error message that displays when the entry doesn't meet the maximum character length rule. | ## Number Column Type The Number column type lets your end-user input numbers, including integers and decimals. Entered values store as numbers. ### Display Panel #### Freeze Columns to Left or Right of The Grid | Setting | Description | | --- | --- | | Freeze Column | When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A41Z&se=2026-11-07T18%3A57%3A41Z&sr=c&sp=r&sig=zTskOG4QAEEK7nAylWezYQ8xYt9Tf6q4X2%2B4EmPegWw%3D) **(ON)**, displays the Column placement setting. Freezing a column moves the column's visible location to the edge of the grid and remains visible when scrolling horizontally. | | Column Placement | Select which side of the grid to pin the column against. Frozen, grouped columns remain in place while other columns scroll around them. Options include the following: - **Left side of grid**: Freezes the column to the left side of the grid. The frozen column remains visible when horizontally scrolling. This is the default option. - **Right side of grid**: Freezes the column to the right side of the grid. The frozen column remains visible when horizontally scrolling. > [!NOTE] > Add Row edit order begins with the first column under Column Setup. When freezing the first column to the right of the grid, it is still the first editable field when an end-user adds and edits a new row. | #### Column Group | Setting | Description | | --- | --- | | Custom CSS Class | Enter a Custom CSS Class to apply to the column's cells. When you update the CSS styling, it applies to all elements that reference this custom class name. | | Format As | Select how to format values in Express View. Your options are: - **Number**: Value shows as entered. - **Percentage (%)**: Value shows as a percentage. For example, an input of 4 shows as 400%. > [!NOTE] > This setting only affects how the number shows in Express View. Values store as the value entered. | | Decimal Places | Enter the number of decimal places to show in Express View. Values of 13 digits or more round to the number of decimal places specified. > [!NOTE] > This setting only affects how the number shows in Express View. Values store as the value entered unless the number is 14 digits or more in length. Regardless if you use this field or not, these long numbers round up. For example, 999999999999999.599 rounds to 999999999999999.60. | | Show Thousands Separator | Set whether to show a thousands separator. The default thousands separator is a comma. When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A41Z&se=2026-11-07T18%3A57%3A41Z&sr=c&sp=r&sig=zTskOG4QAEEK7nAylWezYQ8xYt9Tf6q4X2%2B4EmPegWw%3D) **(ON)**, a thousands separator shows. By default, the Show Thousands Separator toggle is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A41Z&se=2026-11-07T18%3A57%3A41Z&sr=c&sp=r&sig=zTskOG4QAEEK7nAylWezYQ8xYt9Tf6q4X2%2B4EmPegWw%3D) **(OFF)**. > [!NOTE] > This setting only affects how the number shows in Express View. Values store as the value entered. | #### Header Group | Setting | Description | | --- | --- | | Tooltip | A short hint that displays when an end-user positions their cursor over the (**Tooltip**) icon. Tooltips can display across more than one line. | | Custom CSS Class | Enter a Custom CSS Class to apply to the column's header. When you update the CSS styling, it's applied to all elements that reference this custom class name. | ### Actions Panel | Setting | Description | | --- | --- | | + Add Trigger | Click **+ Add Trigger** to create a new trigger. Triggers let you create if/then rules to trigger components when a specified action occurs. | | When... | Select an action to wait for in order to fire the trigger. The drop-down's options are: - **Column is Edited**: Fires the trigger when the end-user edits the column. - **Value is Clicked**: Fires the trigger when the end-user clicks any cell in the column. > [!NOTE] > When a column uses a Value is Clicked trigger, all values in the column use a hyperlink style (blue, underlined text). | | Then... | Enter the Property ID of the component to trigger when the specified **When...** action occurs. | ### Validation Panel #### Column Values Required Group | Setting | Description | | --- | --- | | Required | When set to (ON), the end-user must enter a value in the column before navigating ahead or saving the module. Set the toggle to (OFF) when an entry is optional. By default, the Required toggle is set to (OFF). | | Error Message | Displays as a custom error message when the end-user doesn't enter a value under a required column. | #### Valid Number Range for Column Values Group | Setting | Description | | --- | --- | | Set Minimum | Sets the minimum value that an end-user must enter for valid input. | | Minimum Error Message | A custom error message that displays when the entry doesn't meet the minimum value rule. | | Set Maximum | Sets the maximum value that an end-user must enter for valid input. | | Maximum Error Message | A custom error message that displays when the entry doesn't meet the maximum value rule. | ## Checkbox Column Type The Checkbox column type adds a single checkbox to each row of the grid. When selected, the Boolean value true stores. When clear, the Boolean value false stores. ### Display Panel #### Freeze Columns to Left or Right of The Grid | Setting | Description | | --- | --- | | Freeze Column | When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A41Z&se=2026-11-07T18%3A57%3A41Z&sr=c&sp=r&sig=zTskOG4QAEEK7nAylWezYQ8xYt9Tf6q4X2%2B4EmPegWw%3D) **(ON)**, displays the Column placement setting. Freezing a column moves the column's visible location to the edge of the grid and remains visible when scrolling horizontally. | | Column Placement | Select which side of the grid to pin the column against. Frozen, grouped columns remain in place while other columns scroll around them. Options include the following: - **Left side of grid**: Freezes the column to the left side of the grid. The frozen column remains visible when horizontally scrolling. This is the default option. - **Right side of grid**: Freezes the column to the right side of the grid. The frozen column remains visible when horizontally scrolling. > [!NOTE] > Add Row edit order begins with the first column under Column Setup. When freezing the first column to the right of the grid, it is still the first editable field when an end-user adds and edits a new row. | #### Column Group | Setting | Description | | --- | --- | | Custom CSS Class | Enter a Custom CSS Class to apply to the column's cells. When you update the CSS styling, it applies to all elements that reference this custom class name. | #### Header Group | Setting | Description | | --- | --- | | Tooltip | A short hint that displays when an end-user positions their cursor over the (**Tooltip**) icon. Tooltips can display across more than one line. | | Custom CSS Class | Enter a Custom CSS Class to apply to the column's header. When you update the CSS styling, it's applied to all elements that reference this custom class name. | ### Data Panel | Setting | Description | | --- | --- | | Column is Checked by Default | When selected, the checkbox is selected by default in Express View. | ### Actions Panel | Setting | Description | | --- | --- | | + Add Trigger | Click **+ Add Trigger** to create a new trigger. Triggers let you create if/then rules to trigger components when a specified action occurs. | | When... | Select an action to wait for in order to fire the trigger. The drop-down's only option is: - **Column is Edited**: Fires the trigger when the end-user edits the column. | | Then... | Enter the Property ID of the component to trigger when the specified **When...** action occurs. | ### Validation Panel #### Column Values Required Group | Setting | Description | | --- | --- | | Required | When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A41Z&se=2026-11-07T18%3A57%3A41Z&sr=c&sp=r&sig=zTskOG4QAEEK7nAylWezYQ8xYt9Tf6q4X2%2B4EmPegWw%3D) **(ON)**, the end-user must select the checkbox (value of true) for the cell to be valid. When set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A41Z&se=2026-11-07T18%3A57%3A41Z&sr=c&sp=r&sig=zTskOG4QAEEK7nAylWezYQ8xYt9Tf6q4X2%2B4EmPegWw%3D) **(OFF)**, the cell is valid whether selected or not (value of true or false is valid). By default, the Required toggle is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A41Z&se=2026-11-07T18%3A57%3A41Z&sr=c&sp=r&sig=zTskOG4QAEEK7nAylWezYQ8xYt9Tf6q4X2%2B4EmPegWw%3D) **(OFF)**. | | Error Message | Displays as a custom error message when the end-user doesn't enter a value under a required column. | ## Single-select Dropdown Column Type The Single-select Dropdown column type adds a drop-down to each row of the grid. Your end-user can select one value from the drop-down. The selected value stores as a string. ### Display Panel #### Freeze Columns to Left or Right of The Grid | Setting | Description | | --- | --- | | Freeze Column | When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A41Z&se=2026-11-07T18%3A57%3A41Z&sr=c&sp=r&sig=zTskOG4QAEEK7nAylWezYQ8xYt9Tf6q4X2%2B4EmPegWw%3D) **(ON)**, displays the Column placement setting. Freezing a column moves the column's visible location to the edge of the grid and remains visible when scrolling horizontally. | | Column Placement | Select which side of the grid to pin the column against. Frozen, grouped columns remain in place while other columns scroll around them. Options include the following: - **Left side of grid**: Freezes the column to the left side of the grid. The frozen column remains visible when horizontally scrolling. This is the default option. - **Right side of grid**: Freezes the column to the right side of the grid. The frozen column remains visible when horizontally scrolling. > [!NOTE] > Add Row edit order begins with the first column under Column Setup. When freezing the first column to the right of the grid, it is still the first editable field when an end-user adds and edits a new row. | #### Column Group | Setting | Description | | --- | --- | | Custom CSS Class | Enter a Custom CSS Class to apply to the column's cells. When you update the CSS styling, it applies to all elements that reference this custom class name. | #### Header Group | Setting | Description | | --- | --- | | Tooltip | A short hint that displays when an end-user positions their cursor over the (**Tooltip**) icon. Tooltips can display across more than one line. | | Custom CSS Class | Enter a Custom CSS Class to apply to the column's header. When you update the CSS styling, it's applied to all elements that reference this custom class name. | ### Data Panel There are two different methods that you can use to populate your Single-select Dropdown: Values or Data Reference Key. #### Values Values is the simplest way to populate the Single-select Dropdown. Selecting Values shows a table where you can enter each option label along with its value to store. | Setting | Description | | --- | --- | | Option Label | Each option needs an end-user-facing label describing the choice that it represents. Enter your Option Labels using this column. After you create an option, another row displays for you to create the next option. | | Data Source Value | Each option needs an associated value to store in the submission data. Enter the values to store in submission data using this column. By default, the value is a camel case version of the Option Label. You can also assign a numeric value to each option for use in logic-based configurations. | #### Data Reference Key With Data Reference Key, you can use data from another component to fill your Single-select Dropdown. You'll most often do this with a Data Table component. You'll add your option values and labels to separate columns of the Data Table then reference the Data Table's Property ID in the Data Reference Key setting. | Setting | Description | | --- | --- | | Data Reference Key | Enter the Property ID of the component whose data you're referencing. | | Value Property | Enter the key under which the option values are stored. If you're pulling from a Data Table component, enter the header of the values column in this field. | | Label Property | Enter the key under which the option labels are stored. If you're pulling from a Data Table component, enter the header of the labels column in this field. | ### Actions Panel | Setting | Description | | --- | --- | | + Add Trigger | Click **+ Add Trigger** to create a new trigger. Triggers let you create if/then rules to trigger components when a specified action occurs. | | When... | Select an action to wait for in order to fire the trigger. The drop-down's options are: - **Column is Edited**: Fires the trigger when the end-user edits the column. - **Value is Clicked**: Fires the trigger when the end-user clicks any cell in the column. > [!NOTE] > When a column uses a Value is Clicked trigger, all values in the column use a hyperlink style (blue, underlined text). | | Then... | Enter the Property ID of the component to trigger when the specified **When...** action occurs. | ### Validation Panel #### Column Values Required Group | Setting | Description | | --- | --- | | Required | When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A41Z&se=2026-11-07T18%3A57%3A41Z&sr=c&sp=r&sig=zTskOG4QAEEK7nAylWezYQ8xYt9Tf6q4X2%2B4EmPegWw%3D) **(ON)**, the end-user must enter a value in the column before navigating ahead or saving the module. Set the toggle to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A41Z&se=2026-11-07T18%3A57%3A41Z&sr=c&sp=r&sig=zTskOG4QAEEK7nAylWezYQ8xYt9Tf6q4X2%2B4EmPegWw%3D) **(OFF)** when an entry is optional. By default, the Required toggle is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A41Z&se=2026-11-07T18%3A57%3A41Z&sr=c&sp=r&sig=zTskOG4QAEEK7nAylWezYQ8xYt9Tf6q4X2%2B4EmPegWw%3D) **(OFF)**. | | Error Message | Displays as a custom error message when the end-user doesn't enter a value under a required column. | ## Multi-select Dropdown Column Type The Multi-select Dropdown column type adds a drop-down to each row of the grid. Your end-user can select one or many values from the drop-down. The selected value(s) store as an array of string values. ### Display Panel #### Freeze Columns to Left or Right of The Grid | Setting | Description | | --- | --- | | Freeze Column | When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A41Z&se=2026-11-07T18%3A57%3A41Z&sr=c&sp=r&sig=zTskOG4QAEEK7nAylWezYQ8xYt9Tf6q4X2%2B4EmPegWw%3D) **(ON)**, displays the Column placement setting. Freezing a column moves the column's visible location to the edge of the grid and remains visible when scrolling horizontally. | | Column Placement | Select which side of the grid to pin the column against. Frozen, grouped columns remain in place while other columns scroll around them. Options include the following: - **Left side of grid**: Freezes the column to the left side of the grid. The frozen column remains visible when horizontally scrolling. This is the default option. - **Right side of grid**: Freezes the column to the right side of the grid. The frozen column remains visible when horizontally scrolling. > [!NOTE] > Add Row edit order begins with the first column under Column Setup. When freezing the first column to the right of the grid, it is still the first editable field when an end-user adds and edits a new row. | #### Column Group | Setting | Description | | --- | --- | | Custom CSS Class | Enter a Custom CSS Class to apply to the column's cells. When you update the CSS styling, it applies to all elements that reference this custom class name. | #### Header Group | Setting | Description | | --- | --- | | Tooltip | A short hint that displays when an end-user positions their cursor over the (**Tooltip**) icon. Tooltips can display across more than one line. | | Custom CSS Class | Enter a Custom CSS Class to apply to the column's header. When you update the CSS styling, it's applied to all elements that reference this custom class name. | ### Data Panel There are two different methods that you can use to populate your Multi-select Dropdown: Values or Data Reference Key. #### Values Values is the simplest way to populate the Multi-select Dropdown. Selecting Values shows a table where you can enter each option label along with its value to store. | Setting | Description | | --- | --- | | Option Label | Each option needs an end-user-facing label describing the choice that it represents. Enter your Option Labels using this column. After you create an option, another row displays for you to create the next option. | | Data Source Value | Each option needs an associated value to store in the submission data. Enter the values to store in submission data using this column. By default, the value is a camel case version of the Option Label. You can also assign a numeric value to each option for use in logic-based configurations. | #### Data Reference Key With Data Reference Key, you can use data from another component to fill your Multi-select Dropdown. You'll most often do this with a Data Table component. You'll add your option values and labels to separate columns of the Data Table then reference the Data Table's Property ID in the Data Reference Key setting. | Setting | Description | | --- | --- | | Data Reference Key | Enter the Property ID of the component whose data you're referencing. | | Value Property | Enter the key under which the option values are stored. If you're pulling from a Data Table component, enter the header of the values column in this field. | | Label Property | Enter the key under which the option labels are stored. If you're pulling from a Data Table component, enter the header of the labels column in this field. | ### Actions Panel | Setting | Description | | --- | --- | | + Add Trigger | Click **+ Add Trigger** to create a new trigger. Triggers let you create if/then rules to trigger components when a specified action occurs. | | When... | Select an action to wait for in order to fire the trigger. The drop-down's only option is: - **Column is Edited**: Fires the trigger when the end-user edits the column. | | Then... | Enter the Property ID of the component to trigger when the specified **When...** action occurs. | ### Validation Panel #### Column Values Required Group | Setting | Description | | --- | --- | | Required | When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A41Z&se=2026-11-07T18%3A57%3A41Z&sr=c&sp=r&sig=zTskOG4QAEEK7nAylWezYQ8xYt9Tf6q4X2%2B4EmPegWw%3D) **(ON)**, the end-user must enter a value in the column before navigating ahead or saving the module. Set the toggle to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A41Z&se=2026-11-07T18%3A57%3A41Z&sr=c&sp=r&sig=zTskOG4QAEEK7nAylWezYQ8xYt9Tf6q4X2%2B4EmPegWw%3D) **(OFF)** when an entry is optional. By default, the Required toggle is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A41Z&se=2026-11-07T18%3A57%3A41Z&sr=c&sp=r&sig=zTskOG4QAEEK7nAylWezYQ8xYt9Tf6q4X2%2B4EmPegWw%3D) **(OFF)**. | | Error Message | Displays as a custom error message when the end-user doesn't enter a value under a required column. | ## Button Column Type The Button column type adds a clickable button to each row of the grid. You can configure actions to occur on button-click, including deleting the row or triggering other components. No values store to the submission data for the Button column type. ### Display Panel #### Freeze Columns to Left or Right of The Grid | Setting | Description | | --- | --- | | Freeze Column | When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A41Z&se=2026-11-07T18%3A57%3A41Z&sr=c&sp=r&sig=zTskOG4QAEEK7nAylWezYQ8xYt9Tf6q4X2%2B4EmPegWw%3D) **(ON)**, displays the Column placement setting. Freezing a column moves the column's visible location to the edge of the grid and remains visible when scrolling horizontally. | | Column Placement | Select which side of the grid to pin the column against. Frozen, grouped columns remain in place while other columns scroll around them. Options include the following: - **Left side of grid**: Freezes the column to the left side of the grid. The frozen column remains visible when horizontally scrolling. This is the default option. - **Right side of grid**: Freezes the column to the right side of the grid. The frozen column remains visible when horizontally scrolling. > [!NOTE] > Add Row edit order begins with the first column under Column Setup. When freezing the first column to the right of the grid, it is still the first editable field when an end-user adds and edits a new row. | #### Column Group | Setting | Description | | --- | --- | | Custom CSS Class | Enter a Custom CSS Class to apply to the column's cells. When you update the CSS styling, it applies to all elements that reference this custom class name. | | Disable Buttons | Enables or disables all Buttons in the column. Setting the Disable Buttons toggle to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A41Z&se=2026-11-07T18%3A57%3A41Z&sr=c&sp=r&sig=zTskOG4QAEEK7nAylWezYQ8xYt9Tf6q4X2%2B4EmPegWw%3D) **(ON)** disables the column's buttons in Express View. The buttons remain visible but you can't click them. Setting the toggle to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A41Z&se=2026-11-07T18%3A57%3A41Z&sr=c&sp=r&sig=zTskOG4QAEEK7nAylWezYQ8xYt9Tf6q4X2%2B4EmPegWw%3D) **(OFF)** enables the buttons. By default, the Disable Buttons toggle is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A41Z&se=2026-11-07T18%3A57%3A41Z&sr=c&sp=r&sig=zTskOG4QAEEK7nAylWezYQ8xYt9Tf6q4X2%2B4EmPegWw%3D) **(OFF)**. > [!NOTE] > The Disable Buttons setting affects all buttons in the column. To disable individual buttons, you can target individual cells using logic expressions. See our **Dynamic Grid: Targeted Logic and Referencing Syntax** article to learn more. > [!NOTE] > You can use a logic component to set the Disable Buttons toggle to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A41Z&se=2026-11-07T18%3A57%3A41Z&sr=c&sp=r&sig=zTskOG4QAEEK7nAylWezYQ8xYt9Tf6q4X2%2B4EmPegWw%3D) **(ON)**, if needed. | | Hide Buttons | Shows or hides the Button from view. Setting the Hide Buttons toggle to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A41Z&se=2026-11-07T18%3A57%3A41Z&sr=c&sp=r&sig=zTskOG4QAEEK7nAylWezYQ8xYt9Tf6q4X2%2B4EmPegWw%3D) **(ON)** hides the Button in Express View. The column remains visible but empty in Express View. Setting the toggle to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A41Z&se=2026-11-07T18%3A57%3A41Z&sr=c&sp=r&sig=zTskOG4QAEEK7nAylWezYQ8xYt9Tf6q4X2%2B4EmPegWw%3D) **(OFF)** makes the Button visible. By default, the Hide Buttons toggle is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A41Z&se=2026-11-07T18%3A57%3A41Z&sr=c&sp=r&sig=zTskOG4QAEEK7nAylWezYQ8xYt9Tf6q4X2%2B4EmPegWw%3D) **(OFF)**. > [!NOTE] > You can use a logic component to set the Hide Buttons toggle to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A41Z&se=2026-11-07T18%3A57%3A41Z&sr=c&sp=r&sig=zTskOG4QAEEK7nAylWezYQ8xYt9Tf6q4X2%2B4EmPegWw%3D) **(ON)**, if needed. | #### Header Group | Setting | Description | | --- | --- | | Tooltip | A short hint that displays when an end-user positions their cursor over the (**Tooltip**) icon. Tooltips can display across more than one line. | | Custom CSS Class | Enter a Custom CSS Class to apply to the column's header. When you update the CSS styling, it's applied to all elements that reference this custom class name. | ### Actions Panel | Setting | Description | | --- | --- | | Button Style | Sets the visual appearance of the button. Options include: Primary, Secondary, Success, Danger, Warning, Info, Light, Dark, and Link. The Button Style only affects the Button component's appearance and does not effect its function. | | When... | Lets you create if/then rules to trigger actions on button-click. | | Then... | Select an action to occur on button-click. The drop-down's options are: - **Delete Row**: Deletes the selected row from the grid. - **Custom Action**: Enter the Property ID of a component to trigger on button-click. > [!NOTE] > Use the Header Label setting of the Column Setup table to clearly label and define the button's action. | ## Date Column Type The Date column type adds a field where your end-user can enter or select a date. You can add a Calendar View to the field, which enables a date picker. Entered or selected values store as a formatted string. > [!NOTE] > By default, dates store in ISO 8601 format, and include a timestamp of 00:00:00.000Z UTC (Coordinated Universal Time). ### Display Panel #### Freeze Columns to Left or Right of The Grid | Setting | Description | | --- | --- | | Freeze Column | When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A41Z&se=2026-11-07T18%3A57%3A41Z&sr=c&sp=r&sig=zTskOG4QAEEK7nAylWezYQ8xYt9Tf6q4X2%2B4EmPegWw%3D) **(ON)**, displays the Column placement setting. Freezing a column moves the column's visible location to the edge of the grid and remains visible when scrolling horizontally. | | Column Placement | Select which side of the grid to pin the column against. Frozen, grouped columns remain in place while other columns scroll around them. Options include the following: - **Left side of grid**: Freezes the column to the left side of the grid. The frozen column remains visible when horizontally scrolling. This is the default option. - **Right side of grid**: Freezes the column to the right side of the grid. The frozen column remains visible when horizontally scrolling. > [!NOTE] > Add Row edit order begins with the first column under Column Setup. When freezing the first column to the right of the grid, it is still the first editable field when an end-user adds and edits a new row. | #### Column Group | Setting | Description | | --- | --- | | Custom CSS Class | Enter a Custom CSS Class to apply to the column's cells. When you update the CSS styling, it applies to all elements that reference this custom class name. | | Date Format | Use this setting to change the format of the Placeholder Text or any dates selected in Calendar View. Possible values are m, d, y, and Y (use each value only once). For example, Ydm, ymd, or mY. Entering ymd results in a date format of YY/MM/DD. Entering Ymd results in a date format of YYYY/MM/DD. > [!NOTE] > This setting only affects how the date displays in Express View. Values store in ISO 8601 format. | | Field Delimiter | Delimiters show the breaks between the month, day, and year in a date. Common delimiters include a period (.), slash (/), or hyphen (-). By default, the Field Delimiter is set to /. > [!NOTE] > This setting only affects how the date shows in Express View. Values store in ISO 8601 format. | | Enable Calendar View | When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A41Z&se=2026-11-07T18%3A57%3A41Z&sr=c&sp=r&sig=zTskOG4QAEEK7nAylWezYQ8xYt9Tf6q4X2%2B4EmPegWw%3D) **(ON)**, Date column cells show a calendar icon. When clicked, the date picker widget opens, letting the end-user pick a date in calendar view. By default, the Enable Calendar View toggle is set to (ON). | | Open Datepicker Automatically When Editing | When selected, the date picker widget automatically shows when the end-user selects a Date column cell to edit. When not selected, the end-user must click the calendar icon to open the date picker. By default, the Open Datepicker Automatically When Editing checkbox is not selected. | | Display (+/-) Years in Dropdown | Sets the maximum number of years available in the date picker widget. > [!NOTE] > This setting doesn't limit what the end-user can manually enter, only what years show in calendar view. | #### Header Group | Setting | Description | | --- | --- | | Tooltip | A short hint that displays when an end-user positions their cursor over the (**Tooltip**) icon. Tooltips can display across more than one line. | | Custom CSS Class | Enter a Custom CSS Class to apply to the column's header. When you update the CSS styling, it's applied to all elements that reference this custom class name. | ### Data Panel | Setting | Description | | --- | --- | | Store Date Only | Unqork stores all dates in ISO8601 format with or without the timestamp based on the Store Date Only setting. That way, dates are always passed as either YYYY-MM-DDThh:mm:ss.sssZ or YYYY-MM-DD when using logic components. When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A41Z&se=2026-11-07T18%3A57%3A41Z&sr=c&sp=r&sig=zTskOG4QAEEK7nAylWezYQ8xYt9Tf6q4X2%2B4EmPegWw%3D) **(ON)**, the system only stores the selected date. By default, Store Date Only is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A41Z&se=2026-11-07T18%3A57%3A41Z&sr=c&sp=r&sig=zTskOG4QAEEK7nAylWezYQ8xYt9Tf6q4X2%2B4EmPegWw%3D) **(OFF)**. | ### Actions Panel | Setting | Description | | --- | --- | | + Add Trigger | Click **+ Add Trigger** to create a new trigger. Triggers let you create if/then rules to trigger components when a specified action occurs. | | When... | Select an action to wait for in order to fire the trigger. The drop-down's options are: - **Column is Edited**: Fires the trigger when the end-user edits the column. - **Value is Clicked**: Fires the trigger when the end-user clicks any cell in the column. > [!NOTE] > When a column uses a Value is Clicked trigger, all values in the column use a hyperlink style (blue, underlined text). | | Then... | Enter the Property ID of the component to trigger when the specified **When...** action occurs. | ### Validation Panel #### Valid Date Group | Setting | Description | | --- | --- | | Error Message | Displays as a custom error message when the end-user enters an invalid date. | #### Column Values Required Group | Setting | Description | | --- | --- | | Required | When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A41Z&se=2026-11-07T18%3A57%3A41Z&sr=c&sp=r&sig=zTskOG4QAEEK7nAylWezYQ8xYt9Tf6q4X2%2B4EmPegWw%3D) **(ON)**, the end-user must enter a value in the column before navigating ahead or saving the module. Set the toggle to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A41Z&se=2026-11-07T18%3A57%3A41Z&sr=c&sp=r&sig=zTskOG4QAEEK7nAylWezYQ8xYt9Tf6q4X2%2B4EmPegWw%3D) **(OFF)** when an entry is optional. By default, the Required toggle is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A41Z&se=2026-11-07T18%3A57%3A41Z&sr=c&sp=r&sig=zTskOG4QAEEK7nAylWezYQ8xYt9Tf6q4X2%2B4EmPegWw%3D) **(OFF)**. | | Error Message | Displays as a custom error message when the end-user doesn't enter a value under a required column. | #### Valid Date Range for Column Values Group | Setting | Description | | --- | --- | | Restrict To | Restrict the range of acceptable dates your end-user can input. Available date restrictions include: - **None**: Shows all dates without restrictions. The end-user can pick any date in the future or the past. - **Future Only**: Only shows future dates. - **Past**: Only shows dates that fall in the past. - **Before a Date**: Only shows dates earlier than your chosen date. - **After a Date**: Only shows dates after your chosen date. - **Between Dates**: Only shows dates in your chosen date range. | | From | The From field shows on selection of the Between Dates date restriction. Using the radio buttons you can apply more restrictions (Exact Date, Relative Date, Now) to the start of your date range. - **Exact Date**: Lets you choose your date range's starting date using the Choose Date field. - **Relative (+/-)**: Lets you choose the number of days, months, or years relative to your chosen date. - **Now**: Applies the current date as your starting date. | | To | The To field shows on selection of the Between Dates date restriction. Using the radio buttons you can apply more restrictions (Exact Date, Relative Date, Now) to the start of your date range. - **Exact Date**: Lets you choose your date range's starting date using the Choose Date field. - **Relative (+/-)**: Lets you choose the number of days, months, or years relative to your chosen date. - **Now**: Applies the current date as your end date. | | Minimum Date | Shows on selection of the Between Dates date restriction. Set a minimum valid date. | | Minimum Error Message | Shows on selection of the Between Dates date restriction. Set a custom error message here that displays when the end-user sets a non-compliant date. | | Maximum Date | Shows on selection of the Future Only, Past, Before a Date, After a Date, or Between Dates date restrictions. Set a maximum valid date. | | Maximum Error Message | Shows on selection of the Future Only, Past, Before a Date, After a Date, or Between Dates date restrictions. Set a custom error message here, that displays when the end-user sets a non-compliant date. | ## Actions Panel ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/dynamicGrid_actionsPanel_thumb_0_0(1).jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A41Z&se=2026-11-07T18%3A57%3A41Z&sr=c&sp=r&sig=zTskOG4QAEEK7nAylWezYQ8xYt9Tf6q4X2%2B4EmPegWw%3D) ### Triggers Group The Dynamic Grid component supports creating multiple triggers directly in the component's configuration window. You can choose from three possible triggering events for each trigger. You can also create several triggers that have the same triggering event. | **Setting** | Description | | --- | --- | | **+ Add Trigger** | Click **+ Add Trigger** to create a new trigger. Triggers let you create if/then rules to trigger components when a specified action occurs. | | **When...** | Select an action to watch for in order to fire the triggers. All 3 trigger types fire only when an end-user action happens on the grid. So, if a logic component adds a row, the triggers don't fire. Instead, if an end-user clicks the Add Row button, the triggers fire. The drop-down's options are: - **Row is Added**: Fires the trigger when a new row is added to the table. - **Row is Deleted**: Fires the trigger when any row in the table is deleted. - **Table/Row is Edited**: Fires the trigger when any row in the table is edited. | | **Then...** | Enter the Property ID of the component to trigger when the specified **When...** action occurs. | ### User Affordances Group These settings determine how your end-user can interact with the grid and its data in Express View. When enabled, a Side Panel displays at the right of the grid. From the Side Panel, your end-user can use any enabled settings to perform analytic functions. Some interactions are also available from the grid's column headers. | Setting | Description | | --- | --- | | Allow User to Group Rows | When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A41Z&se=2026-11-07T18%3A57%3A41Z&sr=c&sp=r&sig=zTskOG4QAEEK7nAylWezYQ8xYt9Tf6q4X2%2B4EmPegWw%3D) **(ON)**, your end-user can group all data-based column types. This excludes the Button column type. Row grouping automatically groups data based on shared values and can be nested many times. > [!NOTE] > In the case of a Checkbox column type, the end-user sees checkbox values as text. For instance, end-users might see Checked (true) and Unchecked (false). This feature makes it easier when grouping and sifting through large amounts of data. By default, this toggle is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A41Z&se=2026-11-07T18%3A57%3A41Z&sr=c&sp=r&sig=zTskOG4QAEEK7nAylWezYQ8xYt9Tf6q4X2%2B4EmPegWw%3D) **(OFF)**. | | Allow User to Aggregate & Pivot Across All Columns | When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A41Z&se=2026-11-07T18%3A57%3A41Z&sr=c&sp=r&sig=zTskOG4QAEEK7nAylWezYQ8xYt9Tf6q4X2%2B4EmPegWw%3D) **(ON)****,** your end-user can perform aggregation and pivoting functions. When enabled, the Pivot Mode toggle shows in the Side Panel. Aggregation lets your end-user apply pre-defined functions to values. In order to see aggregated values, a row group must be applied or the Pivot Mode toggle must be set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A41Z&se=2026-11-07T18%3A57%3A41Z&sr=c&sp=r&sig=zTskOG4QAEEK7nAylWezYQ8xYt9Tf6q4X2%2B4EmPegWw%3D) **(ON)**. The available aggregation actions vary by column type. For example: - **Text Field**: Count, First, Last. - **Number**: Avg, Sum, Min, Max, Count, First, Last. - **Date**: Count, First, Last, Min, Max. - **Checkbox**: Count, First, Last. - **Single-select Dropdown**: Count, First, Last. - **Multi-select Dropdown**: Count, First, Last. - **Button**: Not supported. Pivoting allows data to be extrapolated across another axis (Y-axis). Your end-user can pivot all data-based column types. This excludes the Button column type. To use Pivot Mode, the Pivot Mode toggle in the grid's Side Panel must be set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A41Z&se=2026-11-07T18%3A57%3A41Z&sr=c&sp=r&sig=zTskOG4QAEEK7nAylWezYQ8xYt9Tf6q4X2%2B4EmPegWw%3D) **(ON)**. Enabling Pivot Mode temporarily hides tabular data, similar to creating a new Pivot Table instance in Excel. > [!TIP] > For best results, also enable the Allow User to Group Rows setting when enabling the Allow User to Aggregate & Pivot Across All Columns setting. By default, Allow User to Group Rows is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A41Z&se=2026-11-07T18%3A57%3A41Z&sr=c&sp=r&sig=zTskOG4QAEEK7nAylWezYQ8xYt9Tf6q4X2%2B4EmPegWw%3D) **(OFF)**. | | Allow User to Sort by Column | When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A41Z&se=2026-11-07T18%3A57%3A41Z&sr=c&sp=r&sig=zTskOG4QAEEK7nAylWezYQ8xYt9Tf6q4X2%2B4EmPegWw%3D) **(ON**), end-users can sort column values. Clicking a column's header in the grid sorts the column's values in ascending order. Clicking the column's header again sorts the column's values in descending order. Clicking the column's header again removes the sort order. When sorted in ascending order, an **↑** (**Upwards Arrow**) icon shows in the column's header. When sorted in descending order, a **↓** (**Downwards Arrow**) icon shows in the column's header. By default, this toggle is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A41Z&se=2026-11-07T18%3A57%3A41Z&sr=c&sp=r&sig=zTskOG4QAEEK7nAylWezYQ8xYt9Tf6q4X2%2B4EmPegWw%3D) **(OFF)**. | | Allow Multi-Column Sorting | When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A41Z&se=2026-11-07T18%3A57%3A41Z&sr=c&sp=r&sig=zTskOG4QAEEK7nAylWezYQ8xYt9Tf6q4X2%2B4EmPegWw%3D) **(ON)**, end-users can sort by multiple columns at the same time. Press and hold the **Shift** key when selecting additional column headers. Press and hold the **Shift** key when clicking a header to change the sort order. By default, this toggle is set to (OFF). | | Allow User to Filter Columns | When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A41Z&se=2026-11-07T18%3A57%3A41Z&sr=c&sp=r&sig=zTskOG4QAEEK7nAylWezYQ8xYt9Tf6q4X2%2B4EmPegWw%3D) **(ON)**, end-users can filter column values. Each column header in the grid shows a (**Hamburger**) icon. When clicked, a column-specific Filter menu opens. The available filtering actions vary by column type. For example: - **Text Field**: Supports filtering by the available values in that column. - **Number**: Equals, Not equal, Less than, Less than or equals, Greater than, Greater than or equals, and In range. Also supports joining filters using the AND and OR radio buttons. - **Date**: Equals, Greater than, Less than, Not equal, In range. Also supports joining filters using the AND and OR radio buttons. - **Checkbox**: Unchecked (false), Checked (true), or Empty (undefined or null). - **Single-select Dropdown**: Supports filtering by the available values in that column. - **Multi-select Dropdown**: Supports filtering by the available values in that column. > [!NOTE] > For Multi-select Dropdown, filtering by value is interpreted as "any array that contains any of the selected values." For example, if filtering by "USA", both ["USA", "Canada"] and ["USA", "Canada", "Mexico"] match the filter criteria. - **Button**: Not supported. By default, this toggle is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A41Z&se=2026-11-07T18%3A57%3A41Z&sr=c&sp=r&sig=zTskOG4QAEEK7nAylWezYQ8xYt9Tf6q4X2%2B4EmPegWw%3D) **(OFF)**. | | Show Filter Panel | When selected, a Filter panel shows in the Side Panel. From the Side Panel, your end-user can apply column-specific filters. The available filtering actions vary by column type. By default, the Show Filter Panel checkbox is not selected. | | Allow User to Rearrange Rows | When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A41Z&se=2026-11-07T18%3A57%3A41Z&sr=c&sp=r&sig=zTskOG4QAEEK7nAylWezYQ8xYt9Tf6q4X2%2B4EmPegWw%3D) **(ON)**, end-users can rearrange rows in the grid. > [!NOTE] > If you enable row filtering, grouping, sorting, or aggregation and pivoting, the end-user cannot rearrange grid rows. Reordering rows in Express View affects the order in which rows store in the submission data, as well. By default, this toggle is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A41Z&se=2026-11-07T18%3A57%3A41Z&sr=c&sp=r&sig=zTskOG4QAEEK7nAylWezYQ8xYt9Tf6q4X2%2B4EmPegWw%3D) **(OFF)**. | | Invoking Cell Edit State | Select how many times the end-user must click an editable cell in order to edit the cell. There are two options: - Allow user to invoke edit state upon double-click. - Allow user to invoke edit state upon single-click. | ## Validation Panel ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/dynamicGrid_validationsPanel_thumb_0_0(1).jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A41Z&se=2026-11-07T18%3A57%3A41Z&sr=c&sp=r&sig=zTskOG4QAEEK7nAylWezYQ8xYt9Tf6q4X2%2B4EmPegWw%3D) ### Required Group | Setting | Description | | --- | --- | | Require Minimum Valid Rows | When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A41Z&se=2026-11-07T18%3A57%3A41Z&sr=c&sp=r&sig=zTskOG4QAEEK7nAylWezYQ8xYt9Tf6q4X2%2B4EmPegWw%3D) **(ON)**, the end-user must enter at least one valid row in the grid before navigating ahead or saving the module. Set the toggle to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A41Z&se=2026-11-07T18%3A57%3A41Z&sr=c&sp=r&sig=zTskOG4QAEEK7nAylWezYQ8xYt9Tf6q4X2%2B4EmPegWw%3D) **(OFF)** when an entry is optional. > [!NOTE] > This setting respects column-level validation. If the end-user enters one row in the grid, but the row doesn't meet all column-level validations, the component-level validation criteria isn't met. By default, the Require Minimum Valid Rows toggle is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A41Z&se=2026-11-07T18%3A57%3A41Z&sr=c&sp=r&sig=zTskOG4QAEEK7nAylWezYQ8xYt9Tf6q4X2%2B4EmPegWw%3D) **(OFF)**. | | Error Message | A custom error message that displays below a required field. The error message displays when the end-user tries to save or submit the module without completing the required field. | ### Set Number of Allowed Rows Group | Setting | Description | | --- | --- | | Set Minimum | Sets the minimum number of allowed rows in the grid. | | Minimum Error Message | An error message that displays when the grid doesn't meet the minimum number of rows set. | | Set Maximum | Sets the maximum number of allowed rows in the grid. | | Maximum Error Message | An error message that displays when the grid exceeds the maximum number of rows set. | ### Notes on Validation The Dynamic Grid component supports setting validation rules at several levels of the component. In addition to setting validation rules in the main configuration window and column type configuration windows, you can also use logic to set cell or row-level validation. For example, setting minimum or maximum number validation rules in specific rows of the grid. When editing a Dynamic Grid in Express View, visual cues and error messages highlight validation errors at all levels. When using server-side execution to inject data into a Dynamic Grid, though, you'll rely on the `validationErrors` array to identify errors. You can't display `validationErrors` in the front-end. > [!NOTE] > The Dynamic Grid component supports all standard server-side execution actions. The validationErrors array for a Dynamic Grid component has a different structure compared to some other components. Here's a basic overview of the structure: - Component-level validation errors follow the standard server-side execution `validationErrors` schema. - Cell-level and column-level validation errors are summarized by column. Column-specific errors have their own object in the `validationErrors` array, separate from component-level errors. - In each column-specific object of the validationErrors array is a `failedValidations` array. The `failedValidations` array summarizes errors in the column, by type. For example, `minLength` or `required` validation errors. Each group of type-specific errors has its own object in the array. - Each type-specific error object lists cell-level and column-level errors separately, as a `celllevel` errors array or `columnlevel` errors object. - The `celllevel` errors array contains one object per row of the column. This lets you know the exact column/row coordinates of the failed validation. - The `columnlevel` errors object lists all affected rows in the rows array. This again lets you know the exact column/row coordinates. - Error messages are also visible. The following code snippet shows a sample `validationErrors` array, from a server-side-executed Dynamic Grid component. The array shows component-level and cell-level validation errors. ```plaintext 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 "validationErrors": [ { "id": "dynamicGrid", "path": "data.dynamicGrid", "label": "dynamicGrid", "parent": "data", "message": "dynamicGrid is required" }, { "id": "dynamicGrid", "path": "data.dynamicGrid", "label": "dynamicGrid", "parent": "data", "message": "dynamicGrid must contain no more than 5 items" }, { "id": "dynamicGrid.fullName", "path": "data.dynamicGrid.fullName", "label": "Full Name", "parent": "data.dynamicGrid", "failedValidations": [ { "type": "minLength", "columnlevel": { "rows": [0, 1, 3], "message": "Full Name must be no less than 5 characters" } }, { "type": "required", "columnlevel": { "rows": [2, 5, 6], "message": "Full Name is required" } } ] }, { "id": "dynamicGrid.employeeNumber", "path": "data.dynamicGrid.employeeNumber", "label": "Employee Number", "parent": "data.dynamicGrid", "failedValidations": [ { "type": "min", "cellLevel": [ { "row": 0, "message": "Employee Number must be greater than or equal to 1" }, { "row": 1, "message": "Employee Number must be greater than or equal to 2" } ], "columnlevel": { "rows": [2, 3], "message": "Employee Number must be greater than or equal to 100" } }, { "type": "max", "columnlevel": { "rows": [4, 5, 6], "message": "Employee Number must be less than or equal to 999" } } ]}] ``` The Dynamic Grid component also includes built-in data type validations. These validations help ensure data in a given column type matches its intended data types. These validations don't prevent you from saving your module but help detect incorrect data types. The following error messages display for each Column Type when the data types are incorrect: - **Text Field**: No error messages display for the Text Field Column Type. - **Number**: Any value that isn't a number displays a **Not a Number** error message. - **Single-select Dropdown**: If you inject a value from a logic component that doesn't match the column’s Data Source Value or Value Property displays an **Invalid Option** error message. - **Multi-select Dropdown**: Any values that don't match the column’s Data Source Value or Value Property display an **Invalid Option** error message. - **Date**: Any value that isn't formatted as YYYY-MM-DDT00:00:00.000Z or YYYY-MM-DD displays a **Not a Date** error message. > [!NOTE] > The Date Column Type, like the Date Input component, has a Valid Date validation that often overrides this error for end-users anyway. - **Checkbox**: Any value that is not a **true** or **false** Boolean value displays a **Not a Boolean** error message. - **Button**: No error messages display for the Button Column Type. ## Adding a Dynamic Grid Component Let's look at how to set up a Dynamic Grid component that supports inline editing. This simple configuration focuses on supporting basic data entry rather than performing analytics. ### Configure the Dynamic Grid Component For this configuration, you'll add every column type to your Dynamic Grid component. But, you only need to open up the column type configuration window for two of them: the Single-Select Dropdown and Multi-Select Dropdown. For the other column types in your Column Setup table, you can keep the default settings. 1. Drag and drop a **Dynamic Grid** component onto your canvas. 2. In theProperty ID field, enter **dynamicGrid**. 3. In the **Title** field, enter `Tri-State Insurance`. 4. In the Column Setup table, click Add New Column seven times. This adds seven rows to the Column Setup list. 5. In the Header Label, Property ID, and Column Type fields, ente the following 6. Complete the **Column Setup** as follows: | Header Label | Property ID | Editable | Store Data | Column Type | | --- | --- | --- | --- | --- | | Name | **name** | (**checked**)) | (**checked**) | **T****ext Field** | | Annual Income | **incomeAnnual** | (**checked**) | (**checked**) | **N****umber** | | Date of Birth | **dob** | (**checked**) | (**checked**) | **Date Input** | | New Client | **newClient** | (**checked**) | (**checked**) | **Single Checkbox** | | State | **state** | (**checked**) | (**checked**) | **Single-Select Dropdown** | | Types of Insurance | **insuranceTypes** | (**checked**) | (**checked**) | **Multi-Select Dropdown** | | Delete Row | **delete** | ☐ (**unchecked**) | ☐ (**unchecked**) | **Button** | #### Configure the Single-Select Dropdown Column Type Next, add some values to the Single-Select Dropdown. 1. In the **State** row of your Column Setup table, click the (**Settings**) button. The Single-Select Dropdown column type configuration settings display. 2. In the Data panel, click Add Value three times and complete the **Values** settings as follows: | | **Label** | **Value** | | --- | --- | --- | | 1 | New York | NY | | 2 | New Jersey | NJ | | 3 | Connecticut | CT | 3. Click **Save**. The Column type settings close. #### Configure the Multi-Select Dropdown Column Type Finally, add some values to the Multi-Select Dropdown. 1. In the **Types of Insurance** row of your Column Setup table, click the (**Settings**) button. The Multi-Select Dropdown column type configuration window opens. 2. In the Data panel, click Add Value five times and complete the **Values** table as follows: | Option Label | Data Source Value | | --- | --- | | Health | health | | Renters | renters | | Auto | auto | | Home | home | | Life | life | 3. Click **Save**. The Column type settings close. 4. Click **Save Component**. 5. **Save** your module. Now you're ready to preview your module and interact with the grid. Your completed Dynamic Grid component looks like this in Express View: ## Structure of a Dynamic Grid Component's Data Take a moment to understand how data entered in a Dynamic Grid component stores, using the configuration above. > [!NOTE] > Understanding this structure is also key when importing data into your Dynamic Grid component. Whether using a Data Reference Key or referencing a data collection, the source data's structure must match how the Dynamic Grid component stores data. Data entered in the Dynamic Grid component stores as an array of objects under a single key. The top-level key is the Dynamic Grid component's Property ID. Each row added to the Dynamic Grid component in Express View becomes a new object in the array of row objects. In each row object, row-specific values store as explicit key/value pairs, where the key is the Property ID associated with that column. Depending on the column type, values store as different data types and data structures. The following image shows an example of how two rows of data entered in a Dynamic Grid component looks in the DevTools Console: Discover how to reference data from a Dynamic Grid component, view our [Dynamic Grid: Targeted Logic and Referencing Syntax](/v1/docs/dynamic-grid-targeted-logic-and-referencing-syntax) article. ## Dynamic Grid Interaction Shortcuts The Dynamic Grid supports several keyboard interactions that make it quick to navigate or edit the grid in Express View. ### Grid Navigation The following shortcuts for navigation are supported: - Using arrow keys to navigate between cells (any direction). It's important to note that the arrow keys only work when you start navigation in a cell that isn't set up with edit mode. - Pressing **Tab** (navigate right) and **Shift + Tab** (navigate left) to move between cells. > [!NOTE] > If actively editing cells, using these shortcuts to navigate between cells doesn't halt the editing state. - Pressing **Enter** to enter or exit the editing state on an editable cell. > [!NOTE] > You can also double-click a cell to enter the editing state. Or if you prefer to use a single-click, adjust the **Invoking Cell Edit State** setting. ### Cell Editing It's important to note that cell editing shortcuts only work when the grid is editable. The following cell editing shortcuts are supported: - Pressing **Enter** or clicking outside of the cell you're actively editing to commit any changes made. You'll also use the **Enter** key to execute buttons. - Pressing **Esc** to discard any changes to the cell you're actively editing. It's also important to note that end-users can execute any cell with a **Value is Clicked** trigger applied by pressing **Alt + Enter**. #### Checkboxes There are a few shortcuts specific to checkboxes. If end-users aren't editing a checkbox cell, they can select and clear boxes by either: - Pressing **Enter**. - Single-clicking in the checkbox. - Single or double-clicking outside the checkbox. > [!NOTE] > The last option depends on the Invoking Cell Edit State setting. If end-users are editing a checkbox cell, they can select and clear boxes by either: - Pressing **Enter**. - Single-clicking in the checkbox. - Single or double-clicking outside the checkbox. ## Resources - [Dynamic Grid: Targeted Logic and Referencing Syntax](/v1/docs/dynamic-grid-targeted-logic-and-referencing-syntax). - [Dynamic Grid: Custom Cell Styling Using CSS](/v1/docs/dynamic-grid-custom-cell-styling-using-css). - [How to: Use Logic with Dynamic Index](/v1/docs/dynamic-grid-using-logic-with-dynamic-index). - [How do you dynamically edit rows](https://community.unqork.com/platform-q-a-10/dynamically-edit-dynamic-view-grid-rows-9294)? - [How do you dynamically update row (#)](https://community.unqork.com/platform-q-a-10/dynamic-grid-dynamically-update-row-9598)? The Vega (v 2.0.0) runtime is the next-generation engine of the UDesigner platform. Vega uses cutting-edge technologies to improve the Creator and end-user experience. Express View is how your end-user views your application. Express View also lets you preview your applications to test your configuration and view the styling. This is also the view your end-users will see when interacting with your application. After configuring a module, click Preview in the Module Builder to interact with the module in Express View. End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product. Cascading Style Sheets (CSS) is a style sheet language used for presenting how a HTML or XML document looks to end-users. A Property ID is the unique field ID used by Unqork to track and link components in your module. A naming convention for computer programming. Use camelCase for Property IDs, for example: newUser, lastName, & rdoButton. A naming convention for computer programming. Use camelCase for Property IDs, for example: newUser, lastName, & rdoButton. Also known as Record Data. Submission data consists of information saved by Unqork components. View submission data by using the angular command, or in Record Collections. A data structure is the design used for organizing, using, and storing data. The DevTools Console helps you securely store, build, test, and deploy your software.