---
title: "How to: Create Rows in a Table Using the Set Operator"
slug: "set-operator-creating-rows-in-a-table"
updated: 2025-12-23T15:40:07Z
published: 2025-12-23T15:40:07Z
canonical: "docs.unqork.io/set-operator-creating-rows-in-a-table"
---

> ## 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: Create Rows in a Table Using the Set Operator

UDesignerClassic Designer

The **Set operator** lets you add rows to an empty data table.

## Configuration

In this how-to guide, you'll use a [Create Table](/v1/docs/create-table-operator) operator to create an empty table instead of using a [Data Table](/v1/docs/data-table-component) component. Then, you can use [Set](/v1/docs/set-operator) operators to add rows to your empty table.

### Configure the Data Workflow Component

First, create the empty table in a Data Workflow. This table contains three rows as a three-object array.

1. In the Module Builder, drag and drop a **Data Workflow** component onto your canvas.
2. In the **Property ID** and **Canvas Label Text** fields, enter `dwfSet`.

#### Configure the Create Table Operator

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

| Setting | Value |
| --- | --- |
| Category | Create Table |
| Label | Empty Table |
| Create Index | No |
| Number of Rows | 3 |

> [!WARNING]
> Create an empty table (array) and set **Number of Rows** to **3** to produce `[{ }, { }, { }]`. Ensure **Create Index** is set to **No**, otherwise each row will include key/value pairs, like `"index":0`, `"index":1`, and so on.

#### Configure the Set Operators

1. Drag and drop three **Set** operators onto your Data Workflow canvas.
2. Configure the first **Set** operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Set |
| Label | Set Index 0 |
| Path | [0].name |
| Value | John |
3. Configure the second **Set** operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Set |
| Label | Set Index 1 |
| Path | [1].age |
| Value | 67 |
4. Configure the third **Set** operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Set |
| Label | Set Index 2 |
| Path | [2].occupation |
| Value | Engineer |

> [!NOTE]
> The three Set operators populate the empty rows (objects) in your table. Use the **Path** setting to specify the row and key. For example, `[0].name` adds a `"name"` key in the **[0]** index position. Then, set the corresponding value in the **Value** field.
5. Connect the output port (right) of the **Create Table** operator to the input port (left) of the `Set Index 0` **Set** operator.
6. Connect the output port (right) of the `Set Index 0` **Set** operator to the input port (left) of the `Set Index 1` **Set** operator.
7. Connect the output port (right) of the `Set Index 1` **Set** operator to the input port (left) of the `Set Index 2` **Set** operator.

#### Configure the Console Operators

Next, add three [Console](/v1/docs/console-operator) operators to view the process. Connect a Console operator to each of the Set operator's output ports. That way, you can see how each Set operator works.

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

| Setting | Value |
| --- | --- |
| Category | Console |
| Label | Index 0 |
3. Configure the second **Console** operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Console |
| Label | Index 1 |
4. Configure the third **Console** operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Console |
| Label | Index 2 / Final Table |

> [!NOTE]
> In an actual application, use an **Output** operator connected to a **Hidden** component to store the final table and reference it elsewhere in your application.
5. Connect the output port (right) of the `Set Index 0` **Set** operator to the input port (left) of the `Index 0` **Console** operator.
6. Connect the output port (right) of the `Set Index 1` **Set** operator to the input port (left) of the `Index 1` **Console** operator.
7. Connect the output port (right) of the `Set Index 2` **Set** operator to the input port (left) of the `Index 2 / Final Table` **Console** operator.

![Flowchart illustrating steps to create a table and set indexes in programming.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD_dwfSet.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A19Z&se=2026-11-08T19%3A01%3A19Z&sr=c&sp=r&sig=3XYJ%2FdlGiXbMlJ6FPgwnbjthzS1naQsO89QQJyqTU3s%3D)
8. Click **Save Component**.

### Configure the Button Component

Lastly, add a [Button](/v1/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 `btnRunDWFSet`.
3. In the **Label Text** field, enter `Run DWF Set`.
4. From the **Action Type** drop-down, select **Event**.
5. rom the **On Click** drop-down, select **dwfSet**.

![Button configuration settings for triggering events in a workflow module.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD_Button%20settings.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A19Z&se=2026-11-08T19%3A01%3A19Z&sr=c&sp=r&sig=3XYJ%2FdlGiXbMlJ6FPgwnbjthzS1naQsO89QQJyqTU3s%3D)
6. Click **Save Component**.
7. **Save** your module.

Here's how the completed example looks in the Module Builder:

![Interface displaying options to run a DWF set and view dwfSet details.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD_module%20builder(1).png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A19Z&se=2026-11-08T19%3A01%3A19Z&sr=c&sp=r&sig=3XYJ%2FdlGiXbMlJ6FPgwnbjthzS1naQsO89QQJyqTU3s%3D)

Preview your module in Express View and open the DevTools Console. Click the **Run DWF Set** button and view the **index** value for all three Console outputs.

![JavaScript console displaying arrays with user data and execution steps.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD_CD_preview.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A19Z&se=2026-11-08T19%3A01%3A19Z&sr=c&sp=r&sig=3XYJ%2FdlGiXbMlJ6FPgwnbjthzS1naQsO89QQJyqTU3s%3D)

The **Set operator** lets you add rows to an empty data table.

## Configuration

In this how-to guide, you'll use a [Create Table](/v1/docs/create-table-operator) operator to create an empty table instead of using a [Data Table](/v1/docs/data-table-component) component. Then, you can use [Set](/v1/docs/set-operator) operators to add rows to your empty table.

### Configure the Data Workflow Component

First, create the empty table in a Data Workflow. This table contains three rows as a three-object array.

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

#### Configure the Create Table Operator

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

| Setting | Value |
| --- | --- |
| Category | Create Table |
| Label | Empty Table |
| Create Index | No |
| Number of Rows | 3 |

> [!WARNING]
> Create an empty table (array) and set **Number of Rows** to **3** to produce `[{ }, { }, { }]`. Ensure **Create Index** is set to **No**, otherwise each row will include key/value pairs, like `"index":0`, `"index":1`, and so on.

#### Configure the Set Operators

1. Drag and drop three **Set** operators onto your Data Workflow canvas.
2. Configure the first **Set** operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Set |
| Label | Set Index 0 |
| Path | [0].name |
| Value | John |
3. Configure the second **Set** operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Set |
| Label | Set Index 1 |
| Path | [1].age |
| Value | 67 |
4. Configure the third **Set** operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Set |
| Label | Set Index 2 |
| Path | [2].occupation |
| Value | Engineer |

> [!NOTE]
> The three Set operators populate the empty rows (objects) in your table. Use the **Path** setting to specify the row and key. For example, `[0].name` adds a `"name"` key in the **[0]** index position. Then, set the corresponding value in the **Value** field.
5. Connect the output port (right) of the **Create Table** operator to the input port (left) of the `Set Index 0` **Set** operator.
6. Connect the output port (right) of the `Set Index 0` **Set** operator to the input port (left) of the `Set Index 1` **Set** operator.
7. Connect the output port (right) of the `Set Index 1` **Set** operator to the input port (left) of the `Set Index 2` **Set** operator.

### Configure the Console Operators

Next, add three [Console](/v1/docs/console-operator) operators to view the process. Connect a Console operator to each of the Set operator's output ports. That way, you can see how each Set operator works.

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

| Setting | Value |
| --- | --- |
| Category | Console |
| Label | Index 0 |
3. Configure the second **Console** operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Console |
| Label | Index 1 |
4. Configure the third **Console** operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Console |
| Label | Index 2 / Final Table |

> [!NOTE]
> In an actual application, use an **Output** operator connected to a **Hidden** component to store the final table and reference it elsewhere in your application.
5. Connect the output port (right) of the Set Index 0 **Set** operator to the input port (left) of the `Index 0` **Console** operator.
6. Connect the output port (right) of the Set Index 1 **Set** operator to the input port (left) of the `Index 1` **Console** operator.
7. Connect the output port (right) of the Set Index 2 **Set** operator to the input port (left) of the `Index 2 / Final Table` **Console** operator.

![Flowchart illustrating steps to create a table and set indexes in programming.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD_dwfSet.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A19Z&se=2026-11-08T19%3A01%3A19Z&sr=c&sp=r&sig=3XYJ%2FdlGiXbMlJ6FPgwnbjthzS1naQsO89QQJyqTU3s%3D)
8. Click **Save** .

### Configure the Button Component

Lastly, add a [Button](/v1/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 `btnRunDWFSet`.
3. In the **Label Text** field, enter `Run DWF Set`.
4. Select the **Action Type** as **Event**.
5. From the **On Click** drop-down, select **dwfSet**.

![Settings for a button including display options, actions, and user feedback configurations.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/CD_button%20settings.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A19Z&se=2026-11-08T19%3A01%3A19Z&sr=c&sp=r&sig=3XYJ%2FdlGiXbMlJ6FPgwnbjthzS1naQsO89QQJyqTU3s%3D)
6. Click **Save & Close**.
7. **Save** your module.

Here's how the completed example looks in the Module Builder:

![Button to run DWF set and input field for dwfSet command.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/CD_Module%20Builder(3).png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A19Z&se=2026-11-08T19%3A01%3A19Z&sr=c&sp=r&sig=3XYJ%2FdlGiXbMlJ6FPgwnbjthzS1naQsO89QQJyqTU3s%3D)

Preview your module in Express View and open the DevTools Console. Click the **Run DWF Set** button and view the **index** value for all three Console outputs.

![JavaScript console displaying arrays with user data and execution steps.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD_CD_preview.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A19Z&se=2026-11-08T19%3A01%3A19Z&sr=c&sp=r&sig=3XYJ%2FdlGiXbMlJ6FPgwnbjthzS1naQsO89QQJyqTU3s%3D)

An object is a type of data structure that represents a single, self-contained entity that acts as a container for the characteristics of that entity.

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 Property ID is the unique field ID used by Unqork to track and link components in your module.

Canvas Label Text indicates the purpose of the corresponding field or component. For non-input components, the Canvas Label Text isn't end-user facing, and only appears in the .

A key-value pair is a fundamental data structure where a unique "key" is associated with a specific "value," used for organizing and retrieving data efficiently, like in dictionaries or databases.

An object is a type of data structure that represents a single, self-contained entity that acts as a container for the characteristics of that entity.

A key-value pair is a fundamental data structure where a unique "key" is associated with a specific "value," used for organizing and retrieving data efficiently, like in dictionaries or databases.

In Unqork an application is a program used to perform specific tasks. An application can be one of two types: workflow or module.

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.