---
title: "How to: Add Key/Value Pairs to Specific Rows in a Table"
slug: "set-operator-adding-keyvalue-pairs-to-specific-rows-in-a-table"
updated: 2025-12-23T15:51:40Z
published: 2025-12-23T15:51:40Z
canonical: "docs.unqork.io/set-operator-adding-keyvalue-pairs-to-specific-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: Add Key/Value Pairs to Specific Rows in a Table

UDesignerClassic Designer

The **Set operator** lets you add key/value pairs to specific rows in an existing data table.

## Configuration

In this how-to guide, you'll begin by creating a [Data Table](/v1/docs/data-table-component) component to create a three-row table so you can add values. Then, you'll use Set operators to add a unique key/value pair to each row.

### Configure the Data Table Component

Let's create the [Data table](/v1/docs/data-table-component) component where you'll add your new key/value pairs.

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

| name | age |
| --- | --- |
| Cammy | 32 |
| Josephine | 41 |
| Ammie | 22 |

![A data table displaying names and ages of individuals Cammy, Josephine, and Ammie.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image-1765229834130.png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A51Z&se=2026-11-08T04%3A56%3A51Z&sr=c&sp=r&sig=CDf8voDDhO3twrFK6MSqENB0VF4SguIQHCNkAU38MBg%3D)
4. Click **Save Component**.

### Configure the Data Workflow Component

With the Data Table component set up, you’ll set up a [Data Workflow](/v1/docs/data-workflow-component) with [Set](/v1/docs/set-operator) operators to add new key/value pairs to each row.

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** field, enter `dwfSet`.

#### Configure the Input Operator

Let's begin by connecting your [Data Table](/v1/docs/data-table-component) component to the [Data Workflow](/v1/docs/unqorks-data-workflow-operators) using an 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 | dtTable |
| Required | Yes |
| Source | Default |

#### Configure the Set Operators

For each of these operators, you'll add a key/value pair to a row of the table. The **Path** setting specifies the table row where you add each value. You must also define the key in the Path setting. For example, `[0].occupation` adds an occupation key in the `[0]` index position. Next, use the Value setting to define the added value.

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].occupation |
| Value | mathematician |
3. Configure the second **Set** operator's **Info** window as follows:

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

| Setting | Value |
| --- | --- |
| Category | Set |
| Label | Set Index 2 |
| Path | [2].occupation |
| Value | illustrator |
5. Connect the output port (right) of the **Input** 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

Connect a [Console](/v1/docs/console-operator) operator to each of the Set operators. That way, you can view how each Set operator processes the data.

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

![Workflow diagram illustrating data processing steps including input, set, and console actions.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD-dwfSet.png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A51Z&se=2026-11-08T04%3A56%3A51Z&sr=c&sp=r&sig=CDf8voDDhO3twrFK6MSqENB0VF4SguIQHCNkAU38MBg%3D)
8. Click **Save Component**.

> [!NOTE]
> You'll notice that the `Set Index 2` **Set** operator only outputs to `Index 2/Final Table` **Console** operator. When creating applications, you might want to use a dedicated Output operator. By connecting it to a Hidden component, you can store the final table and reference it throughout your application.

### Configure the Button Component

Lastly, create a button you can click in Express View 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 `btnRunDWF`.
3. In the **Label Text** field, enter `Run DWF Set`.
4. From the **Action Type** drop-down, select **Event**.
5. From the **On Click** drop-down, enter or select `dwfSet`.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD_Run%20DWFset%20%204.jpg?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A51Z&se=2026-11-08T04%3A56%3A51Z&sr=c&sp=r&sig=CDf8voDDhO3twrFK6MSqENB0VF4SguIQHCNkAU38MBg%3D)
6. Click **Save Component**.
7. **Save** your module.

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

![Interface showing options to run DWF Set and view dtTable settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD_module%20builder.png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A51Z&se=2026-11-08T04%3A56%3A51Z&sr=c&sp=r&sig=CDf8voDDhO3twrFK6MSqENB0VF4SguIQHCNkAU38MBg%3D)

Preview your module in Express View and open the DevTools Console. Click the **Run DWF Set** button and look at the data in the DevTools Console.

![Console output displaying arrays of names, ages, and occupations of individuals.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD_Console.png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A51Z&se=2026-11-08T04%3A56%3A51Z&sr=c&sp=r&sig=CDf8voDDhO3twrFK6MSqENB0VF4SguIQHCNkAU38MBg%3D)

The **Set operator** lets you add key/value pairs to specific rows in an existing data table.

## Configuration

In this how-to guide, you'll begin by creating a [Data Table](/v1/docs/data-table-component) component to create a three-row table so you can add values. Then, you'll use Set operators to add a unique key/value pair to each row.

### Configure the Data Table Component

Let's create the [Data table](/v1/docs/data-table-component) component where you'll add your new key/value pairs.

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

| name | age |
| --- | --- |
| Cammy | 32 |
| Josephine | 41 |
| Ammie | 22 |

![Data table displaying names and ages of individuals in a structured format.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image-1765231390751.png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A51Z&se=2026-11-08T04%3A56%3A51Z&sr=c&sp=r&sig=CDf8voDDhO3twrFK6MSqENB0VF4SguIQHCNkAU38MBg%3D)
4. Click **Save**.

### Configure the Data Workflow Component

With the Data Table component set up, you’ll set up a [Data Workflow](/v1/docs/data-workflow-component) with [Set](/v1/docs/set-operator) operators to add new key/value pairs to each row.

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

#### Configure the Input Operator

Let's begin by connecting your [Data Table](/v1/docs/data-table-component) component to the [Data Workflow](/v1/docs/unqorks-data-workflow-operators) using an 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 | dtTable |
| Required | Yes |
| Source | Default |

#### Configure the Set Operators

For each of these operators, you'll add a key/value pair to a row of the table. The **Path** setting specifies the table row where you add each value. You must also define the key in the Path setting. For example, `[0].occupation` adds an occupation key in the `[0]` index position. Next, use the Value setting to define the added value.

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].occupation |
| Value | mathematician |
3. Configure the second **Set** operator's **Info** window as follows:

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

| Setting | Value |
| --- | --- |
| Category | Set |
| Label | Set Index 2 |
| Path | [2].occupation |
| Value | illustrator |
5. Connect the output port (right) of the **Input** 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

Connect a [Console](/v1/docs/console-operator) operator to each of the Set operators. That way, you can view how each Set operator processes the data.

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

![Workflow diagram illustrating data processing steps with input, set, and console actions.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image-1765231547587.png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A51Z&se=2026-11-08T04%3A56%3A51Z&sr=c&sp=r&sig=CDf8voDDhO3twrFK6MSqENB0VF4SguIQHCNkAU38MBg%3D)
8. Click **Save**.

> [!NOTE]
> You'll notice that the `Set Index 2` **Set** operator only outputs to `Index 2/Final Table` **Console** operator.
> 
> When creating applications, you might want to use a dedicated Output operator. By connecting it to a Hidden component, you can store the final table and reference it throughout your application.

## Configure the Button Component

Lastly, create a button you can click in Express View to trigger your Data Workflow.

1. Drag and drop a **Button** component onto your canvas, placing it below the Data Workflow.
2. In the **Property ID** field, enter `btnRunDWFSet`.
3. In the **Label Text** field, enter `Run DWF Set`.
4. Set the **Action Type** as **Event**.
5. From the **On Click** drop-down, enter or select `dwfSet`.

![Button configuration settings with action types and user feedback options displayed.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/CD_RunDWFset.png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A51Z&se=2026-11-08T04%3A56%3A51Z&sr=c&sp=r&sig=CDf8voDDhO3twrFK6MSqENB0VF4SguIQHCNkAU38MBg%3D)
6. Click **Save & Close**.
7. **Save** your module.

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

![Interface displaying options for dtTable and dwfSet with a Run DWF Set button.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/CD_module%20builder.png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A51Z&se=2026-11-08T04%3A56%3A51Z&sr=c&sp=r&sig=CDf8voDDhO3twrFK6MSqENB0VF4SguIQHCNkAU38MBg%3D)

Preview your module in Express View and open the DevTools Console. Click the **Run DWF Set** button and look at the data in the DevTools Console.

![Console output displaying arrays of names, ages, and occupations of individuals.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD_Console.png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A51Z&se=2026-11-08T04%3A56%3A51Z&sr=c&sp=r&sig=CDf8voDDhO3twrFK6MSqENB0VF4SguIQHCNkAU38MBg%3D)

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.

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.

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 .

The location of an element in an array.

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.

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.

The action performed by the button when selected.

DOM (Document Object Model) events are signals or notifications that something has occurred or is occurring within a web page, often triggered by user interactions or by the browser itself. These events allow JavaScript to react to changes and interactions on a web page, making it dynamic and interactive.

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

A Property ID is the unique field ID used by Unqork to track and link components in your module.