--- title: "Dynamic Grid Column Type Settings" slug: "dynamic-grid-column-type-settings" tags: ["reference-guides"] status: "update" updated: 2026-10-13T18:18:30Z published: 2026-10-13T18:18:30Z canonical: "docs.unqork.io/dynamic-grid-column-type-settings" --- > ## 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 Column Type Settings Clicking the settings icon in the **Actions** column of the Dynamic Grid Column Setup table opens a column configuration modal. The modal displays the column's Header Label and Property ID for reference. Settings are organized by column type. For an overview of the Dynamic Grid component and its general settings, see [Dynamic Grid Component](/unqorkai/docs/dynamic-grid-component). > **How to read settings tables** > > > The tables below describe each configurable option as it displays in the UnqorkAI platform. Values are formatted as follows: `inline code` — a value to type exactly as shown | **Bold** — a value selected from a drop-down, radio button, tab, or choice chip | **ON**/**OFF** — toggle state | ✓ — checkbox checked | ☐ — checkbox unchecked ## Text Field ### Display #### Freeze Column to Left or Right Side of Grid | Setting | Type | Default | Description | | --- | --- | --- | --- | | Freeze Column | Toggle | OFF | When set to **ON**, this setting pins the column to a fixed position in the grid. | | Column Placement | Radio button | — | The side of the grid where the column is pinned. Options include: **Left side of grid** and **Right side of grid**. Visible when **Freeze Column** is **ON**. | #### Column | Setting | Type | Default | Description | | --- | --- | --- | --- | | Custom CSS Class | Text input | — | A custom CSS class applied to the column cells. | | Allow Text Wrapping | Toggle | OFF | When set to **ON**, this setting wraps text in column cells instead of truncating it. | #### Header | Setting | Type | Default | Description | | --- | --- | --- | --- | | Tooltip | Text input | — | A short hint that displays when a cursor is positioned over the column header. | | Custom CSS Class | Text input | — | A custom CSS class applied to the column header. | ### Actions | Column | Type | Description | | --- | --- | --- | | When... | Drop-down | The row event that triggers the action. Options include: **Row is Added**, **Row is Deleted**, **Row is Edited**, or **Row is Saved**. | | Then... | Property ID | The Property ID of the component to trigger when the event occurs. | ### Validation #### Column Values Required | Setting | Type | Default | Description | | --- | --- | --- | --- | | Required | Toggle | OFF | When set to **ON**, this setting requires the column to have a value before the row can be saved. | | Error Message | Text input | `is required` | The error message displayed when the required condition is not met. | #### Allowed Characters for Column Values | Setting | Type | Default | Description | | --- | --- | --- | --- | | Set Minimum | Number input | `0` | The minimum number of characters allowed in the column. | | Min Length Error Message | Text input | — | The error message displayed when the value is shorter than the minimum. | | Set Maximum | Number input | `0` | The maximum number of characters allowed in the column. | | Max Length Error Message | Text input | — | The error message displayed when the value exceeds the maximum. | ## Number ### Display #### Freeze Column to Left or Right Side of Grid | Setting | Type | Default | Description | | --- | --- | --- | --- | | Freeze Column | Toggle | OFF | When set to **ON**, this setting pins the column to a fixed position in the grid. | | Column Placement | Radio button | — | The side of the grid where the column is pinned. Options include: **Left side of grid** and **Right side of grid**. Visible when **Freeze Column** is **ON**. | #### Column | Setting | Type | Default | Description | | --- | --- | --- | --- | | Format as | Radio button | **Number** | The display format for column values. Options include: **Number** and **Percentage (%)**. | | Decimal Places | Number input | `0` | The number of decimal places to display. | | Show Thousands Separator | Toggle | OFF | When set to **ON**, this setting displays a thousands separator in column values. | #### Header | Setting | Type | Default | Description | | --- | --- | --- | --- | | Tooltip | Text input | — | A short hint that displays when a cursor is positioned over the column header. | | Custom CSS Class | Text input | — | A custom CSS class applied to the column header. | ### Actions | Column | Type | Description | | --- | --- | --- | | When... | Drop-down | The row event that triggers the action. Options include: **Row is Added**, **Row is Deleted**, **Row is Edited**, or **Row is Saved**. | | Then... | Property ID | The Property ID of the component to trigger when the event occurs. | ### Validation #### Column Values Required | Setting | Type | Default | Description | | --- | --- | --- | --- | | Required | Toggle | OFF | When set to **ON**, this setting requires the column to have a value before the row can be saved. | | Error Message | Text input | `is required` | The error message displayed when the required condition is not met. | #### Valid Number Range for Column Values | Setting | Type | Default | Description | | --- | --- | --- | --- | | Set Minimum | Number input | `0` | The minimum valid value for the column. | | Min Length Error Message | Text input | — | The error message displayed when the value is below the minimum. | | Set Maximum | Number input | `0` | The maximum valid value for the column. | | Max Length Error Message | Text input | — | The error message displayed when the value exceeds the maximum. | ## Checkbox ### Display #### Freeze Column to Left or Right Side of Grid | Setting | Type | Default | Description | | --- | --- | --- | --- | | Freeze Column | Toggle | OFF | When set to **ON**, this setting pins the column to a fixed position in the grid. | | Column Placement | Radio button | — | The side of the grid where the column is pinned. Options include: **Left side of grid** and **Right side of grid**. Visible when **Freeze Column** is **ON**. | #### Column | Setting | Type | Default | Description | | --- | --- | --- | --- | | Custom CSS Class | Text input | — | A custom CSS class applied to the column cells. | | Allow Text Wrapping | Toggle | OFF | When set to **ON**, this setting wraps text in column cells instead of truncating it. | #### Header | Setting | Type | Default | Description | | --- | --- | --- | --- | | Tooltip | Text input | — | A short hint that displays when a cursor is positioned over the column header. | | Custom CSS Class | Text input | — | A custom CSS class applied to the column header. | ### Data | Setting | Type | Default | Description | | --- | --- | --- | --- | | Column Is Checked by Default | Toggle | OFF | When set to **ON**, this setting checks the checkbox in each new row by default. | ### Actions | Column | Type | Description | | --- | --- | --- | | When... | Drop-down | The row event that triggers the action. Options include: **Row is Added**, **Row is Deleted**, **Row is Edited**, or **Row is Saved**. | | Then... | Property ID | The Property ID of the component to trigger when the event occurs. | ### Validation #### Column Values Required | Setting | Type | Default | Description | | --- | --- | --- | --- | | Required | Toggle | OFF | When set to **ON**, this setting requires the column to have a value before the row can be saved. | | Error Message | Text input | `is required` | The error message displayed when the required condition is not met. | ## Single-Select Dropdown ### Display #### Freeze Column to Left or Right Side of Grid | Setting | Type | Default | Description | | --- | --- | --- | --- | | Freeze Column | Toggle | OFF | When set to **ON**, this setting pins the column to a fixed position in the grid. | | Column Placement | Radio button | — | The side of the grid where the column is pinned. Options include: **Left side of grid** and **Right side of grid**. Visible when **Freeze Column** is **ON**. | #### Column | Setting | Type | Default | Description | | --- | --- | --- | --- | | Custom CSS Class | Text input | — | A custom CSS class applied to the column cells. | | Allow Text Wrapping | Toggle | OFF | When set to **ON**, this setting wraps text in column cells instead of truncating it. | #### Header | Setting | Type | Default | Description | | --- | --- | --- | --- | | Tooltip | Text input | — | A short hint that displays when a cursor is positioned over the column header. | | Custom CSS Class | Text input | — | A custom CSS class applied to the column header. | ### Data #### Data Source Type | Setting | Type | Default | Description | | --- | --- | --- | --- | | Data Source Type | Choice chip | **Values** | Sets how options are loaded. | > **Values** — Manually define a list of options. > > > | Column | Type | Description | > | --- | --- | --- | > | Label | Text input | The display text shown to end-users for each option. | > | Value | Text input | The value stored when the option is selected. | > **Data Reference Key** — Load options from another module field. > > > | Setting | Type | Default | Description | > | --- | --- | --- | --- | > | Data Reference Key | Property ID | — | The Property ID of a field that returns a JSON array to use as the option source. | > | Value Property | Text input | — | The property in each item to use as the stored value. | > | Label Property | Text input | — | The property in each item to use as the display label. | ### Actions | Column | Type | Description | | --- | --- | --- | | When... | Drop-down | The row event that triggers the action. Options include: **Row is Added**, **Row is Deleted**, **Row is Edited**, or **Row is Saved**. | | Then... | Property ID | The Property ID of the component to trigger when the event occurs. | ### Validation #### Column Values Required | Setting | Type | Default | Description | | --- | --- | --- | --- | | Required | Toggle | OFF | When set to **ON**, this setting requires the column to have a value before the row can be saved. | | Error Message | Text input | `is required` | The error message displayed when the required condition is not met. | ## Multi-Select Dropdown ### Display #### Freeze Column to Left or Right Side of Grid | Setting | Type | Default | Description | | --- | --- | --- | --- | | Freeze Column | Toggle | OFF | When set to **ON**, this setting pins the column to a fixed position in the grid. | | Column Placement | Radio button | — | The side of the grid where the column is pinned. Options include: **Left side of grid** and **Right side of grid**. Visible when **Freeze Column** is **ON**. | #### Column | Setting | Type | Default | Description | | --- | --- | --- | --- | | Custom CSS Class | Text input | — | A custom CSS class applied to the column cells. | | Allow Text Wrapping | Toggle | OFF | When set to **ON**, this setting wraps text in column cells instead of truncating it. | #### Header | Setting | Type | Default | Description | | --- | --- | --- | --- | | Tooltip | Text input | — | A short hint that displays when a cursor is positioned over the column header. | | Custom CSS Class | Text input | — | A custom CSS class applied to the column header. | ### Data #### Data Source Type | Setting | Type | Default | Description | | --- | --- | --- | --- | | Data Source Type | Choice chip | **Values** | Sets how options are loaded. | > **Values** — Manually define a list of options. > > > | Column | Type | Description | > | --- | --- | --- | > | Label | Text input | The display text shown to end-users for each option. | > | Value | Text input | The value stored when the option is selected. | > **Data Reference Key** — Load options from another module field. > > > | Setting | Type | Default | Description | > | --- | --- | --- | --- | > | Data Reference Key | Property ID | — | The Property ID of a field that returns a JSON array to use as the option source. | > | Value Property | Text input | — | The property in each item to use as the stored value. | > | Label Property | Text input | — | The property in each item to use as the display label. | ### Actions | Column | Type | Description | | --- | --- | --- | | When... | Drop-down | The row event that triggers the action. Options include: **Row is Added**, **Row is Deleted**, **Row is Edited**, or **Row is Saved**. | | Then... | Property ID | The Property ID of the component to trigger when the event occurs. | ### Validation #### Column Values Required | Setting | Type | Default | Description | | --- | --- | --- | --- | | Required | Toggle | OFF | When set to **ON**, this setting requires the column to have a value before the row can be saved. | | Error Message | Text input | `is required` | The error message displayed when the required condition is not met. | ## Button ### Display #### Freeze Column to Left or Right Side of Grid | Setting | Type | Default | Description | | --- | --- | --- | --- | | Freeze Column | Toggle | OFF | When set to **ON**, this setting pins the column to a fixed position in the grid. | | Column Placement | Radio button | — | The side of the grid where the column is pinned. Options include: **Left side of grid** and **Right side of grid**. Visible when **Freeze Column** is **ON**. | #### Column | Setting | Type | Default | Description | | --- | --- | --- | --- | | Custom CSS Class | Text input | — | A custom CSS class applied to the column cells. | | Button Style | Drop-down | **Primary** | The color style of the buttons in this column. Options include: **Primary**, **Secondary**, **Success**, **Danger**, **Warning**, **Info**, **Light**, **Dark**, or **Link**. | | Disable Buttons | Toggle | OFF | When set to **ON**, this setting disables all buttons in the column. | | Hide Buttons | Toggle | OFF | When set to **ON**, this setting hides all buttons in the column. | #### Header | Setting | Type | Default | Description | | --- | --- | --- | --- | | Tooltip | Text input | — | A short hint that displays when a cursor is positioned over the column header. | | Custom CSS Class | Text input | — | A custom CSS class applied to the column header. | ### Actions #### When button is clicked | Setting | Type | Default | Description | | --- | --- | --- | --- | | Then... | Drop-down | — | The action to perform when the button is clicked. Options include: **Delete row** and **Custom action**. | | Property ID | Property ID | — | The Property ID of the component to trigger. Visible when **Then...** is **Custom action**. | ## Date ### Display #### Freeze Column to Left or Right Side of Grid | Setting | Type | Default | Description | | --- | --- | --- | --- | | Freeze Column | Toggle | OFF | When set to **ON**, this setting pins the column to a fixed position in the grid. | | Column Placement | Radio button | — | The side of the grid where the column is pinned. Options include: **Left side of grid** and **Right side of grid**. Visible when **Freeze Column** is **ON**. | #### Column | Setting | Type | Default | Description | | --- | --- | --- | --- | | Custom CSS Class | Text input | — | A custom CSS class applied to the column cells. | | Date Format | Text input | `mdY` | The format used to display and parse date values. | | Field Delimiter | Text input | `/` | The character used to separate date parts. | | Disable Automated Formatting | Toggle | OFF | When set to **ON**, this setting disables automatic formatting of date input values. | | Enable Calendar View | Toggle | ON | When set to **OFF**, this setting hides the calendar date picker. | | Open Date Picker Automatically When Editing | Toggle | OFF | When set to **ON**, this setting opens the date picker automatically when an end-user begins editing a cell. | | Display (+/-) Years in Drop-Down | Number input | `10` | The number of years before and after the current year to display in the year drop-down. | #### Header | Setting | Type | Default | Description | | --- | --- | --- | --- | | Tooltip | Text input | — | A short hint that displays when a cursor is positioned over the column header. | | Custom CSS Class | Text input | — | A custom CSS class applied to the column header. | ### Data | Setting | Type | Default | Description | | --- | --- | --- | --- | | Store Date Only | Toggle | OFF | When set to **ON**, this setting stores only the date portion of the value, without time. | ### Actions #### Triggers | Column | Type | Description | | --- | --- | --- | | When... | Drop-down | The row event that triggers the action. Options include: **Row is Added**, **Row is Deleted**, **Row is Edited**, or **Row is Saved**. | | Then... | Property ID | The Property ID of the component to trigger when the event occurs. | ### Validation #### Column Values Required | Setting | Type | Default | Description | | --- | --- | --- | --- | | Required | Toggle | OFF | When set to **ON**, this setting requires the column to have a value before the row can be saved. | | Error Message | Text input | `is required` | The error message displayed when the required condition is not met. | #### Valid Date | Setting | Type | Default | Description | | --- | --- | --- | --- | | Error Message | Text input | — | The error message displayed when the column value is not a valid date. | #### Valid Date Range for Column Values | Setting | Type | Default | Description | | --- | --- | --- | --- | | Restrict to | Drop-down | **None** | Restricts the dates end-users can enter. Options include: **None**, **Future Only**, **Past Only**, **Before a Date**, **After a Date**, and **Between Dates**. | > **Future Only** > > > | Setting | Type | Default | Description | > | --- | --- | --- | --- | > | Minimum Date | Text input | Current date | The earliest date end-users can enter. | > | Minimum Date Error Message | Text input | — | The error message displayed when the date is before the minimum. | > **Past Only** > > > | Setting | Type | Default | Description | > | --- | --- | --- | --- | > | Maximum Date | Text input | Current date | The latest date end-users can enter. | > | Maximum Date Error Message | Text input | — | The error message displayed when the date exceeds the maximum. | > **Before a Date** > > > | Setting | Type | Default | Description | > | --- | --- | --- | --- | > | Minimum Date | Text input | Current date | The earliest date end-users can enter. | > | Minimum Date Error Message | Text input | — | The error message displayed when the date is before the minimum. | > **After a Date** > > > | Setting | Type | Default | Description | > | --- | --- | --- | --- | > | Maximum Date | Text input | Current date | The latest date end-users can enter. | > | Maximum Date Error Message | Text input | — | The error message displayed when the date exceeds the maximum. | > **Between Dates** > > > **From**: Sets how the start of the allowed date range is defined. Defaults to **Exact Date**. > > > | From: option | Additional settings | > | --- | --- | > | **Exact Date** | Minimum Date (text input), Minimum Date Error Message (text input) | > | **Relative (+/-)** | Minimum Date Error Message (text input), Offset (number input, default `0`), Unit (drop-down: **Days** (default), Months, Years) | > | **Now** | Minimum Date Error Message (text input) | > > > **To**: Sets how the end of the allowed date range is defined. Defaults to **Exact Date**. > > > | To: option | Additional settings | > | --- | --- | > | **Exact Date** | Maximum Date (text input), Maximum Date Error Message (text input) | > | **Relative (+/-)** | Maximum Date Error Message (text input), Offset (number input, default `0`), Unit (drop-down: **Days** (default), Months, Years) | > | **Now** | Maximum Date Error Message (text input) | --- **Changelog** | Date | Change | | --- | --- | | — | Initial publication. | Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. A Property ID is the unique field ID used by Unqork to track and link components in your module. Cascading Style Sheets (CSS) is a style sheet language used for presenting how a HTML or XML document looks to end-users. Cumulative Layout Shift (CLS) measures how much elements in a webpage shift while using it. Some search engines use the CLS metric to rate a website's accessibility in their search rankings. The Number data type accepts integer or floating point values. The number data type does not use quotes around numerical values. If you allow decimal places, use this setting to limit the number of decimal places the end-user can enter. 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. JSON (JavaScript Object Notation) is an open standard file and data interchange format. Unqork uses JSON for submission (record) data. An array is a type of object that stores one or more data types. Data types supported in arrays include numbers, strings, and objects. A JavaScript property is a member of an object that associates a key with a value. A JavaScript object is a data structure that stores a collection of properties. Triggers activate another component when certain requirements are met. Trigger types include Concurrent, Post, and Error. Some components do not have the ability to trigger others. 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.