--- title: "Nesting Components and Data" slug: "nesting-components-and-data" updated: 2025-09-25T23:05:58Z published: 2025-09-25T23:05:58Z canonical: "docs.unqork.io/nesting-components-and-data" --- > ## 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. # Nesting Components and Data **Nesting components and Data** is the act of stacking a component or component data inside another component or data array. In Unqork, nesting components can be thought of in two ways: - In the [Module Builder](/v1/docs/introduction-to-the-module-builder), you'll nest components by placing one component inside another. For example, placing [Text Field](/v1/docs/text-field-component) components inside a [Panel](/v1/docs/panel-component) or [Columns](/v1/docs/columns-component) component. - In [submission data](/v1/docs/submission-data), component data could nest inside the array of another component. For example, the values of Text Field components might nest inside a [Vega Table](/v1/docs/vega-table-component) component's array. To learn more about each method of nesting, click on the tabs below: Module Builder and Express ViewSubmission Data ## Nesting in Module Builder and Express View Nesting in the [Module](/v1/docs/introduction-to-the-module-builder) Builder is the act of placing one component inside another. Creators commonly nest components inside [Panel](/v1/docs/panel-component), [Columns](/v1/docs/columns-component), and the [Vega Table](/v1/docs/vega-table-component) component. Below is an example of three Text Field components nested in a Columns component: [![A static example displaying three text field components nested in a columns component.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/builderNestExample2_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A04Z&se=2026-11-08T11%3A18%3A04Z&sr=c&sp=r&sig=5FN50KibULZvs%2Bsml1U%2BOmiNSPzTfIY1Qzjr4vf6wcE%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/builderNestExample2.jpg?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A04Z&se=2026-11-08T11%3A18%3A04Z&sr=c&sp=r&sig=5FN50KibULZvs%2Bsml1U%2BOmiNSPzTfIY1Qzjr4vf6wcE%3D) The **Module** **Outline** to the left of the Module Builder displays the nested Text Field components inside the Column component. This view helps you contextualize and organize your module. > To learn more about the Module Builder, view our [Introduction to the Module Builder](/v1/docs/introduction-to-the-module-builder#Navigati) article. Here’s how the example looks in Express View. The three Text Field components display inside of an invisible Columns component: ## [![A static image of Express View displaying three text field components nested in an invisible columns component.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/expressNestExample_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A04Z&se=2026-11-08T11%3A18%3A04Z&sr=c&sp=r&sig=5FN50KibULZvs%2Bsml1U%2BOmiNSPzTfIY1Qzjr4vf6wcE%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/expressNestExample.jpg?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A04Z&se=2026-11-08T11%3A18%3A04Z&sr=c&sp=r&sig=5FN50KibULZvs%2Bsml1U%2BOmiNSPzTfIY1Qzjr4vf6wcE%3D) ## Nesting in Submission Data Component nesting might occur in [submission data](/v1/docs/submission-data), depending on the component used. For example, the [Columns](/v1/docs/columns-component) component does not nest component key values in submission data, but the [Vega Table](/v1/docs/vega-table-component) component does store component data in an array. In the example below, the **vegaTable** [Vega Table](/v1/docs/vega-table-component) component contains three [Text Field](/v1/docs/text-field-component) components in an array. Each Text Field component's Property ID is a key and each key contains a value: [![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Nesting_Components_04_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A04Z&se=2026-11-08T11%3A18%3A04Z&sr=c&sp=r&sig=5FN50KibULZvs%2Bsml1U%2BOmiNSPzTfIY1Qzjr4vf6wcE%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Nesting%20Components%2004.jpg?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A04Z&se=2026-11-08T11%3A18%3A04Z&sr=c&sp=r&sig=5FN50KibULZvs%2Bsml1U%2BOmiNSPzTfIY1Qzjr4vf6wcE%3D) When nesting submission data, it’s important to consider how nested data is targeted. Deeply nested data might be difficult to retrieve using [logic components](/v1/docs/data-event-processing-components). You can use a [Data Workflow](/v1/docs/data-workflow-component) component and the [Unwind](/v1/docs/unwind-operator) operator to bring nested submission data to a higher level, effectively "un-nesting" it. ## Resources - [Understanding Submission Data](/v1/docs/submission-data) - [Nest Data Using the Nest By Operator](/v1/docs/nest-by-operator) - [Unwind Nested Data using the Unwind Operator](/v1/docs/unwind-operator) - [Access Submission Data Using the DevTools Console](/v1/docs/access-submission-data-using-the-devtools-console) An array is a type of object that stores one or more data types. Data types supported in arrays include numbers, strings, and objects. Also known as Unqork Users, or Designer Users; is anyone who is inside the Unqork platform. 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. 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 Property ID is the unique field ID used by Unqork to track and link components in your module.