---
title: "How to: Nest by Child Name Using the Nest By Operator"
slug: "nest-by-operator-nest-by-child-name"
description: "Learn how to use the Nest By operator to group data effectively, creating nested structures for better organization and display in your applications."
updated: 2025-11-24T16:09:19Z
published: 2025-11-25T16:08:31Z
canonical: "docs.unqork.io/nest-by-operator-nest-by-child-name"
---

> ## 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.

# How to: Nest by Child Name Using the Nest By Operator

UDesignerClassic Designer

The **Nest By operator** groups multiple rows of data based on one or more specified fields, creating a nested structure. It’s especially useful when you want to consolidate related records under a common parent—for example, grouping multiple orders under a single customer. This operator outputs a single row per group, with a nested array containing all the grouped records. It’s ideal for preparing data for display in repeating panels or for organizing complex datasets before further processing.

> [!NOTE]
> These instructions assume you have a new module open, saved, and with a title.

## Configuration

In this how-to guide, you'll create a data table of information and nest all the rows into a single array.

### Configure the Data Table Component

First, you'll set up a [Data Table](/v1/docs/data-table-component) component with a list of customers, account values, and account numbers.

1. In the Module Builder, drag and drop a **Data Table** component onto your canvas.
2. In the **Property ID** and **Label Text** fields, enter `dtAccountInfo`.
3. In the data table, enter the following:

| firstName | lastName | accountValue | accountNumber |
| --- | --- | --- | --- |
| Josephine | Darakjy | 543891 | 12345 |
| Lenna | Paprocki | 1000000 | 12346 |
| Sage | Wieser | 1000000 | 12346 |
| Abel | Maclead | 7432572 | 12347 |
| Ernie | Stenseth | 5000000 | 12348 |
| Valentine | Gillian | 5439294 | 12349 |
| Dyan | Oldroyd | 17890 | 12346 |
| Fatima | Saylors | 19578 | 12347 |
| Willow | Kusko | 54389 | 12347 |

> [!NOTE]
> You purposely added duplicate information to show the power of the Nest By operator.

![A static image displaying the configuration of the dtAccountInfo Data Table.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD_Nest%20By_dtAccountInfo.png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A20Z&se=2026-11-09T04%3A51%3A20Z&sr=c&sp=r&sig=wmiUHh1Y4cpQ9Nxa9zkJh6i1c5yCCOYqGjhq6r7QfXg%3D)
4. Click **Save Component**.

### Configure the Data Workflow Component

1. Drag and drop a **Data Workflow** component onto your canvas, placing it below the **Data Table** component.
2. In the **Property ID** and **Canvas Label Text** fields, enter `dwfNestByChild`.

![A static image displaying the configuration of the dwfNestByChild Data Workflow.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD_Nest%20By_dwfNestByChild.png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A20Z&se=2026-11-09T04%3A51%3A20Z&sr=c&sp=r&sig=wmiUHh1Y4cpQ9Nxa9zkJh6i1c5yCCOYqGjhq6r7QfXg%3D)

#### Configure the Input Operator

1. Drag and drop an **Input** operator onto your Data Workflow canvas.
2. Configure the operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| category | Input |
| Component | dtAccountInfo |
| required | No |
| source | Default |

#### Configure the Nest By Operator

1. Drag and drop a **Nest By** operator onto your Data Workflow canvas.
2. Configure the operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| category | Nest By |
| label | Nest by Child Name |
| Parent Keys |  |
| Child Name | account |
3. Connect the output port (right) of the `dtAccountInfo` **Input** operator to the input port (left) of the `Nest by Child Name` **Nest By** operator.

#### Configure the Console Operator

1. Drag and drop a **Console** operator onto your Data Workflow canvas.
2. Configure the operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| category | Console |
| label | Child Name Only |
3. Connect the output port (right) of the `Nest by Child Name` **Nest By** operator to the input port (left) of the `Child Name Only` **Console** operator.
4. Click **Save Component**.

### Configure the Button Component

Lastly, configure a [Button](https://docs.unqork.io/docs/how-to-guide-button-component) component to trigger your Data Workflow.

1. Drag and drop a **Button** component onto your canvas, placing it below your Data Workflow component.
2. In the **Property ID** field, enter `btnNestByChild`.
3. In the **Label Text** field, enter `Nest by Child Name`.
4. From the **Action Type** drop-down, select **Event**.
5. In the **On Click** field, enter `dwfNestByChild`.

![A static image displaying the configuration of the btnNestByChild Button component.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD_Nest%20By__btnNestByChild.png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A20Z&se=2026-11-09T04%3A51%3A20Z&sr=c&sp=r&sig=wmiUHh1Y4cpQ9Nxa9zkJh6i1c5yCCOYqGjhq6r7QfXg%3D)
6. Click **Save Component**.
7. **Save** your module.

Here's how your module looks in the Module Builder:

![A static image displaying the module configuration for explaining Nest By operator.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD_Nest%20By_module.png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A20Z&se=2026-11-09T04%3A51%3A20Z&sr=c&sp=r&sig=wmiUHh1Y4cpQ9Nxa9zkJh6i1c5yCCOYqGjhq6r7QfXg%3D)

Preview your module in Express View and open the DevTools Console. Click the **Nest by Child Name** button, and you'll see all nine of your table rows nested in a single array with `account` as the child name.

![A static image displaying the Express View and the Dev Console.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Nest%20By_Dev%20Console.png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A20Z&se=2026-11-09T04%3A51%3A20Z&sr=c&sp=r&sig=wmiUHh1Y4cpQ9Nxa9zkJh6i1c5yCCOYqGjhq6r7QfXg%3D)

The **Nest By operator** groups multiple rows of data based on one or more specified fields, creating a nested structure. It’s especially useful when you want to consolidate related records under a common parent—for example, grouping multiple orders under a single customer. This operator outputs a single row per group, with a nested array containing all the grouped records. It’s ideal for preparing data for display in repeating panels or for organizing complex datasets before further processing.

> [!NOTE]
> These instructions assume you have a new module open, saved, and with a title.

## Configuration

In this how-to guide, you'll create a data table of information and nest all the rows into a single array.

### Configure the Data Table Component

First, you'll set up a [Data Table](/v1/docs/data-table-component) component with a list of customers, account values, and account numbers.

1. In the Module Builder, drag and drop a **Data Table** component onto your canvas.
2. In the **Property ID** and **Canvas Label Text** fields, enter `dtAccountInfo`.
3. In the data table, enter the following:

| firstName | lastName | accountValue | accountNumber |
| --- | --- | --- | --- |
| Josephine | Darakjy | 543891 | 12345 |
| Lenna | Paprocki | 1000000 | 12346 |
| Sage | Wieser | 1000000 | 12346 |
| Abel | Maclead | 7432572 | 12347 |
| Ernie | Stenseth | 5000000 | 12348 |
| Valentine | Gillian | 5439294 | 12349 |
| Dyan | Oldroyd | 17890 | 12346 |
| Fatima | Saylors | 19578 | 12347 |
| Willow | Kusko | 54389 | 12347 |

> [!NOTE]
> You purposely added duplicate information to show the power of the Nest By operator.

![A static image displaying the configuration of the dtAccountInfo Data Table component.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/CD_Nest%20By__dtAccountInfo%20Data%20Table.png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A20Z&se=2026-11-09T04%3A51%3A20Z&sr=c&sp=r&sig=wmiUHh1Y4cpQ9Nxa9zkJh6i1c5yCCOYqGjhq6r7QfXg%3D)
4. Click **Save & Close**.

### Configure the Data Workflow Component

1. Drag and drop a **Data Workflow** component onto your canvas. Place it below the Data Table component.
2. In the **Canvas Label Text** and **Property Name** fields, enter `dwfNestByChild`.

![A static image displaying the configuration of the dwfNestByChild Data Workflow component.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/CD_Nest%20By__dwfNestByChild%20DWF.png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A20Z&se=2026-11-09T04%3A51%3A20Z&sr=c&sp=r&sig=wmiUHh1Y4cpQ9Nxa9zkJh6i1c5yCCOYqGjhq6r7QfXg%3D)

#### Configure the Input Operator

1. Drag and drop an **Input** operator onto your Data Workflow canvas.
2. Configure the operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| category | Input |
| Component | dtAccountInfo |
| required | No |
| source | Default |

#### Configure the Nest By Operator

1. Drag and drop a **Nest By** operator onto your Data Workflow canvas.
2. Configure the operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| category | Nest By |
| label | Nest by Child Name |
| Parent Keys |  |
| Child Name | account |
3. Connect the output port (right) of the `dtAccountInfo` **Input** operator to the input port (left) of the `Nest by Child Name` **Nest By** operator.

#### Configure the Console Operator

1. Drag and drop a **Console** operator onto your Data Workflow canvas.
2. Configure the operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| category | Console |
| label | Child Name Only |
3. Connect the output port (right) of the `Nest by Child Name` **Nest By** operator to the input port (left) of the `Child Name Only` **Console** operator.
4. Click **Save**.

### Configure the Button Component

Lastly, configure a [Button](https://docs.unqork.io/docs/how-to-guide-button-component) component to trigger your Data Workflow.

1. Drag and drop a **Button** component onto your canvas, placing it below the Data Workflow component.
2. In the **Property ID** field, enter `btnNestByChild`.
3. In the **Label Text** field, enter `Nest by Child Name`.
4. Set the **Action Type** as **Event**.
5. In the **On Click** field, enter `dwfNestByChild`.

![A static image displaying the configuration of the btnNestByChild Button component.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/CD_Nest%20By__btnNestByChild.png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A20Z&se=2026-11-09T04%3A51%3A20Z&sr=c&sp=r&sig=wmiUHh1Y4cpQ9Nxa9zkJh6i1c5yCCOYqGjhq6r7QfXg%3D)
6. Click **Save & Close**.
7. **Save** your module.

Here's how your module looks in the Module Builder:

![A static image displaying the configuration of the module used to explain the Nest By operator.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/CD_Nest%20By_module.png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A20Z&se=2026-11-09T04%3A51%3A20Z&sr=c&sp=r&sig=wmiUHh1Y4cpQ9Nxa9zkJh6i1c5yCCOYqGjhq6r7QfXg%3D)

Preview your module in Express View and open the DevTools Console. Click the **Nest by Child Name** button, and you'll see all nine of your table rows nested in a single array with `account` as the child name.

![A static image displaying the Express View and the Dev Console.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Nest%20By_Dev%20Console.png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A20Z&se=2026-11-09T04%3A51%3A20Z&sr=c&sp=r&sig=wmiUHh1Y4cpQ9Nxa9zkJh6i1c5yCCOYqGjhq6r7QfXg%3D)

An array is a type of object that stores one or more data types. Data types supported in arrays include numbers, strings, and objects.

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.

The DevTools Console helps you securely store, build, test, and deploy your software.