---
title: "Multi-Row Operator"
slug: "multi-row-operator"
description: "Learn how to use the Multi-Row operator to shift and compare stock prices over time, enhancing your data analysis with effective visualizations."
updated: 2025-11-24T17:08:42Z
published: 2025-11-25T16:08:31Z
canonical: "docs.unqork.io/multi-row-operator"
---

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

# Multi-Row Operator

UDesignerClassic Designer

![A static image displaying the Multi-row operator and its Info Window.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD_Multi-Row_Operator%20and%20Info%20Window.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A06Z&se=2026-11-08T19%3A01%3A06Z&sr=c&sp=r&sig=mKK7JE%2BCVToMNA4HL0m3nMseVq0dljwX9eA2KbDASPs%3D)

The **Multi-Row operator** duplicates a table column and shifts it to another row in the same table. Depending on your needs, you can shift data up or down in your table. First, you’ll set the number of rows you want your data shifted and a new key name for the data.

This operator is useful if you want to compare changes in your data over time. Let's say you're tracking your company's stock prices and want to compare the changes over a number of days. You can use the Multi-Row operator to generate that data.

You’ll find the Multi-Row operator under the [Table](/v1/docs/tableoperators) group to the left of the [Data Workflow](https://docs.unqork.io/docs/introduction-to-data-workflow) canvas

## About the Info Window

Here's a breakdown of each setting in the Info window:

| Setting | Description |
| --- | --- |
| Category | Grayed out and non-adjustable setting indicating the operation type. |
| Label | Sets the label for your operator, displaying below the operator on your Data Workflow canvas. This field is optional, but set a label if you use more than one of the same operator type. A label helps you identify your operators without opening any Info windows. |
| Preserve Argument Type | When selected, this setting ensures the argument data type is respected when the operator executes. |
| Default | When shifting data, there is inevitably an empty key. This drop-down determines what to use in that empty key. By default, this is set to `0`. |
| Key Name | The key/value pair to duplicate and shift. |
| Steps | Sets the number of rows to shift the data. You can input a positive or negative number. A positive number moves data up, and a negative number moves data down. |
| New Key Name | Sets the name for the new key where your shifted data will be held. A new name is required so you do no have two keys with the same name. |

## Adding a Multi-Row Operator

Let’s say you want to compare your company's stock prices over multiple days. To begin, you’ll create a set of sample data that includes:

- Company Name
- Stock Price
- Date

Then, you use a [Data Workflow](https://docs.unqork.io/docs/introduction-to-data-workflow) with a Multi-Row operator to duplicate that data and shift it down one row. Doing so places your current stock prices next to the stock price for the previous day. You can then take the average of those two prices and display this data in a chart.

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

### Configure the Data Table Component

First, set up your sample data in a [Data Table](https://docs.unqork.io/docs/data-table-component) component.

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

| # | stock | price | date |
| --- | --- | --- | --- |
| 1 | ABC | 54 | 2025-07-01 |
| 2 | ABC | 65 | 2025-07-02 |
| 3 | ABC | 67 | 2025-07-03 |
| 4 | ABC | 78 | 2025-07-04 |
| 5 | ABC | 99 | 2025-07-05 |
| 6 | ABC | 87 | 2025-07-06 |
| 7 | ABC | 45 | 2025-07-07 |
| 8 | ABC | 32 | 2025-07-08 |
| 9 | ABC | 12 | 2025-07-09 |
| 10 | ABC | 12 | 2025-07-10 |
| 11 | ABC | 12 | 2025-07-11 |
| 12 | ABC | 87 | 2025-07-12 |
| 13 | ABC | 65 | 2025-07-13 |
| 14 | ABC | 54 | 20251-07-14 |
| 15 | ABC | 43 | 20251-07-15 |
| 16 | ABC | 55 | 2025-07-16 |
| 17 | ABC | 66 | 2025-07-17 |
| 18 | ABC | 77 | 2025-07-18 |
| 19 | ABC | 88 | 2025-07-19 |

![A static image displaying the table values of the dtStocks Data Table.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD_Multi-Row_dtStocks%20Data%20Table.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A06Z&se=2026-11-08T19%3A01%3A06Z&sr=c&sp=r&sig=mKK7JE%2BCVToMNA4HL0m3nMseVq0dljwX9eA2KbDASPs%3D)
4. Click **Save Component**.

### Configure the Hidden Component

Before you can duplicate your stock prices using a Data Workflow, you need a Hidden component to store your final data.

1. Drag and drop a **Hidden** component onto your canvas, placing it below the `dtStocks` **Data Table** component.
2. In the **Property ID** and **Label Text** fields, enter `multiOutput`.
3. Click **Save Component**.

### Configure the Data Workflow Component

Now it's time to add your [Data Workflow](/v1/docs/data-workflow-component). You’ll use an [Input](https://docs.unqork.io/docs/input-operator) operator to bring your data into the Data Workflow. Then, use a Multi-Row operator to duplicate your price data and shift your data up one row. Next, you use a [Create Field](https://docs.unqork.io/docs/create-field-operator) operator to take the average between your two stock prices. You’ll also configure a [Pick](https://docs.unqork.io/docs/pick-operator) operator to select three pieces of data:

- Date
- Stock price
- 2-day average price

Lastly, an [Output](https://docs.unqork.io/docs/output-operator) operator outputs the data in the `multiOutput` **Hidden** component.

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

![A static image displaying the configuration of the dwfMultiRow Data Workflow.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD_Multi-row_dwfMultiRow%20Data%20Workflow.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A06Z&se=2026-11-08T19%3A01%3A06Z&sr=c&sp=r&sig=mKK7JE%2BCVToMNA4HL0m3nMseVq0dljwX9eA2KbDASPs%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 | dtStocks |
| required | Yes |
| source | Default |

#### Configure the Multi-Row Operator

This operator duplicates your price data and moves it up one row.

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

| Setting | Value |
| --- | --- |
| category | Multi-Row |
| label | Price |
| Default | 0 |
| Key Name | price |
| Steps | 1 |
| New Key Name | nextDayPrice |
3. Connect the output port (right) of the `dtStocks` **Input** operator to the input port (left) of the `Price` **Multi-Row** operator.

#### Configure the Console Operator

This operator lets you view your data after it passes through the Multi-Row 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 | Multi-Row Result |
3. Connect the output port (right) of the `Price` **Multi-Row** operator to the input port (left) of the `Multi-Row Result` **Console** operator.

#### Configure the Create Field Operator

This operator finds the average of your two stock prices. It then places that average in a new key of your table called `priceAvg`.

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

| Setting | Value |
| --- | --- |
| Category | Formula |
| Label | priceAvg |
| Do Not Sanitize Formula | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Checked_Box(7).png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A06Z&se=2026-11-08T19%3A01%3A06Z&sr=c&sp=r&sig=mKK7JE%2BCVToMNA4HL0m3nMseVq0dljwX9eA2KbDASPs%3D) (checked) |
| Field 1 | priceAvg=SUM(price,nextDayPrice)/2 |
| Field 2 |  |
| Field 3 |  |
| Field 4 |  |
| Field 5 |  |
3. Connect the output port (right) of the `Price` **Multi-Row** operator to the input port (left) of the `priceAvg` **Create Field** operator.

#### Configure the Pick Operator

The Pick operator selects the `date`, `price`, and `priceAvg` values from your data.

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

| Setting | Value |
| --- | --- |
| category | Pick |
| label | date,price,priceAvg |
| Pick Keys | date,price,priceAvg |
3. Connect the output port (right) of the `priceAvg` **Create Field** operator to the input port (left) of the `date,price,priceAvg` **Pick** operator.

#### Configure the Output Operator

This operator outputs the data from your Pick operator into your Hidden component.

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

| Setting | Value |
| --- | --- |
| category | Output |
| Component | multiOutput |
| action | value |
3. Connect the output port (right) of the `date,price,priceAvg` **Pick** operator to the input port (left) of the `multiOutput` **Output** operator.
4. Click **Save**.

### Configure the Chart Component

With your new data created, you'll display it in a Chart component. Remember, your Hidden component stores the date, the stock price for that date, and the 2-day average stock price for that date. So, you’ll set the date as the X-axis for the other data points.

1. Drag and drop a **Chart** component onto your canvas, placing it below the `multiOutput` **Hidden** component.
2. In the **Property ID**, enter `chartAverage`.
3. In the **Label Text** field, enter `2 Day Moving Avg`.
4. In the **Inputs** table, enter the following:

| ID | Label | Chart Type | Categories | Values |
| --- | --- | --- | --- | --- |
| multiOutput | Price | line | date | price |
| multiOutput | 2 Day Avg | line | date | priceAvg |

![A static image displaying the chartAverage Chart component.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD_Multi-row_chartAverage%20Chart.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A06Z&se=2026-11-08T19%3A01%3A06Z&sr=c&sp=r&sig=mKK7JE%2BCVToMNA4HL0m3nMseVq0dljwX9eA2KbDASPs%3D)
5. Click **Save Component**.

### Configure the Button Component

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

1. Drag and drop a **Button** component onto your canvas, placing it below the `dtStocks` **Data Table** component.
2. In the **Property ID**, enter `btnMultiRow`.
3. In the **Label Text** field, enter `Start Multi-Row`.
4. Under **Element Type**, select **Module**.
5. From the **Action Type** drop-down, select **Event**.
6. In the **On Click** field, select`dwfMultiRow - dwfMultiRow`.

![A static image displaying the configuration of the btnMultiRow Button component.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD_Multi-Row_btnMultiRow%20Button.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A06Z&se=2026-11-08T19%3A01%3A06Z&sr=c&sp=r&sig=mKK7JE%2BCVToMNA4HL0m3nMseVq0dljwX9eA2KbDASPs%3D)
7. Click **Save Component**.
8. **Save** your module.

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

![A static image displaying the module configuration to explain the Multi-row operator.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD_Multi-row_Module%20configuration.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A06Z&se=2026-11-08T19%3A01%3A06Z&sr=c&sp=r&sig=mKK7JE%2BCVToMNA4HL0m3nMseVq0dljwX9eA2KbDASPs%3D)

Preview your module in Express View and click the **Start Multi-Row** button. Your chart populates with the data from your Hidden component and displays the average stock prices that have changed over two days.

![A static image displaying the Line Chart for the chartAverage Charts component.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Multi-Row%20Operator%20Express%20View.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A06Z&se=2026-11-08T19%3A01%3A06Z&sr=c&sp=r&sig=mKK7JE%2BCVToMNA4HL0m3nMseVq0dljwX9eA2KbDASPs%3D)

Open the DevTools Console to review the results from the Multi-Row operator. Here, you can see that each row of your data now contains `nextDayPrice`. This result is generated by your Multi-Row operator, taking your original price data and moving it up a row.

![A static image displaying the DevTools Console for the Multi-row operator definition.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Multi-Row%20Operator_DevTools%20Console.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A06Z&se=2026-11-08T19%3A01%3A06Z&sr=c&sp=r&sig=mKK7JE%2BCVToMNA4HL0m3nMseVq0dljwX9eA2KbDASPs%3D)

![A static image displaying the Multi-row operator along with its Info Window.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/CD_Multi-Row%20Operator-Info%20Window.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A06Z&se=2026-11-08T19%3A01%3A06Z&sr=c&sp=r&sig=mKK7JE%2BCVToMNA4HL0m3nMseVq0dljwX9eA2KbDASPs%3D)

The **Multi-Row operator** duplicates a table column and shifts it to another row in the same table. Depending on your needs, you can shift data up or down in your table. First, you’ll set the number of rows you want your data shifted and a new key name for the data.

This operator is useful if you want to compare changes in your data over time. Let's say you're tracking your company's stock prices and want to compare the changes over a number of days. You can use the Multi-Row operator to generate that data.

You’ll find the Multi-Row operator under the [Table](/v1/docs/tableoperators) group to the left of the [Data Workflow](https://docs.unqork.io/docs/introduction-to-data-workflow) canvas

## About the Info Window

Here's a breakdown of each setting in the Info window:

| Setting | Description |
| --- | --- |
| Category | Grayed out and non-adjustable setting indicating the operation type. |
| Label | Sets the label for your operator, displaying below the operator on your Data Workflow canvas. This field is optional, but set a label if you use more than one of the same operator type. A label helps you identify your operators without opening any Info windows. |
| Preserve Argument Type | When selected, this setting ensures the argument data type is respected when the operator executes. |
| Default | When shifting data, there is inevitably an empty key. This drop-down determines what to use in that empty key. By default, this is set to `0`. |
| Key Name | The key/value pair to duplicate and shift. |
| Steps | Sets the number of rows to shift the data. You can input a positive or negative number. A positive number moves data up, and a negative number moves data down. |
| New Key Name | Sets the name for the new key where your shifted data will be held. A new name is required so you do no have two keys with the same name. |

## Adding a Multi-Row Operator

Let’s say you want to compare your company's stock prices over multiple days. To begin, you’ll create a set of sample data that includes:

- Company Name
- Stock Price
- Date

Then, you use a [Data Workflow](https://docs.unqork.io/docs/introduction-to-data-workflow) with a Multi-Row operator to duplicate that data and shift it down one row. Doing so places your current stock prices next to the stock price for the previous day. You can then take the average of those two prices and display this data in a chart.

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

### Configure the Data Table Component

First, set up your sample data in a [Data Table](https://docs.unqork.io/docs/data-table-component) component.

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

| # | stock | price | date |
| --- | --- | --- | --- |
| 1 | ABC | 54 | 2025-07-01 |
| 2 | ABC | 65 | 2025-07-02 |
| 3 | ABC | 67 | 2025-07-03 |
| 4 | ABC | 78 | 2025-07-04 |
| 5 | ABC | 99 | 2025-07-05 |
| 6 | ABC | 87 | 2025-07-06 |
| 7 | ABC | 45 | 2025-07-07 |
| 8 | ABC | 32 | 2025-07-08 |
| 9 | ABC | 12 | 2025-07-09 |
| 10 | ABC | 12 | 2025-07-10 |
| 11 | ABC | 12 | 2025-07-11 |
| 12 | ABC | 87 | 2025-07-12 |
| 13 | ABC | 65 | 2025-07-13 |
| 14 | ABC | 54 | 20251-07-14 |
| 15 | ABC | 43 | 20251-07-15 |
| 16 | ABC | 55 | 2025-07-16 |
| 17 | ABC | 66 | 2025-07-17 |
| 18 | ABC | 77 | 2025-07-18 |
| 19 | ABC | 88 | 2025-07-19 |

![A static image displaying the Data Table contents of the dtStocks Data Table component.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/CD_Multi-Row%20Operator_dtStocks.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A06Z&se=2026-11-08T19%3A01%3A06Z&sr=c&sp=r&sig=mKK7JE%2BCVToMNA4HL0m3nMseVq0dljwX9eA2KbDASPs%3D)
4. Click **Save & Close**.

### Configure the Hidden Component

Before you can duplicate your stock prices using a Data Workflow, you need a Hidden component to store your final data.

1. Drag and drop a **Hidden** component onto your canvas, placing it below the `dtStocks` **Data Table** component.
2. In the **Property ID** and **Canvas Label Text** fields, enter `multiOutput`.
3. Click **Save & Close**.

### Configure the Data Workflow Component

Now it's time to add your [Data Workflow](/v1/docs/data-workflow-component). You’ll use an [Input](https://docs.unqork.io/docs/input-operator) operator to bring your data into the Data Workflow. Then, use a Multi-Row operator to duplicate your price data and shift your data up one row. Next, you use a [Create Field](https://docs.unqork.io/docs/create-field-operator) operator to take the average between your two stock prices. You’ll also configure a [Pick](https://docs.unqork.io/docs/pick-operator) operator to select three pieces of data:

- Date
- Stock price
- 2-day average price

Lastly, an [Output](https://docs.unqork.io/docs/output-operator) operator outputs the data in the `multiOutput` **Hidden** component.

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

![A static image displaying the configuration of the dwfMultiRow Data Workflow.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/CD_Multi-Row%20Operator-dwfMultiRow.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A06Z&se=2026-11-08T19%3A01%3A06Z&sr=c&sp=r&sig=mKK7JE%2BCVToMNA4HL0m3nMseVq0dljwX9eA2KbDASPs%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 | dtStocks |
| required | Yes |
| Source | Default |

#### Configure the Multi-Row Operator

This operator duplicates your price data and moves it up one row.

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

| Setting | Value |
| --- | --- |
| category | Multi-Row |
| label | Price |
| Default | 0 |
| Key Name | price |
| Steps | 1 |
| New Key Name | nextDayPrice |
3. Connect the output port (right) of the `dtStocks` **Input** operator to the input port (left) of the `Price` **Multi-Row** operator.

#### Configure the Console Operator

This operator lets you view your data after it passes through the Multi-Row 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 | Multi-Row Result |
3. Connect the output port (right) of the `Price` **Multi-Row** operator to the input port (left) of the `Multi-Row Result` **Console** operator.

#### Configure the Create Field Operator

This operator finds the average of your two stock prices. It then places that average in a new key of your table called `priceAvg`.

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

| Setting | Value |
| --- | --- |
| category | Formula |
| label | priceAvg |
| Do Not Sanitize Formula | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Checked_Box(7).png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A06Z&se=2026-11-08T19%3A01%3A06Z&sr=c&sp=r&sig=mKK7JE%2BCVToMNA4HL0m3nMseVq0dljwX9eA2KbDASPs%3D) (checked) |
| Field 1 | priceAvg=SUM(price,nextDayPrice)/2 |
| Field 2 |  |
| Field 3 |  |
| Field 4 |  |
| Field 5 |  |
3. Connect the output port (right) of the `Price` **Multi-Row** operator to the input port (left) of the `priceAvg` **Create Field** operator.

#### Configure the Pick Operator

The Pick operator selects the `date`, `price`, and `priceAvg` values from your data.

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

| Setting | Value |
| --- | --- |
| category | Pick |
| label | date,price,priceAvg |
| Pick Keys | date,price,priceAvg |
3. Connect the output port (right) of the `priceAvg` **Create Field** operator to the input port (left) of the `date,price,priceAvg` **Pick** operator.

#### Configure the Output Operator

This operator outputs the data from your Pick operator into your Hidden component.

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

| Setting | Value |
| --- | --- |
| category | Output |
| Component | multiOutput |
| action | value |
3. Connect the output port (right) of the `date,price,priceAvg` **Pick** operator to the input port (left) of the `multiOutput` **Output** operator.
4. Click **Save**.

### Configure the Chart Component

With your new data created, you'll display it in a Chart component. Remember, your Hidden component stores the date, the stock price for that date, and the 2-day average stock price for that date. So, you’ll set the date as the X-axis for the other data points.

1. Drag and drop a **Chart** component onto your canvas, placing it below the `multiOutput` **Hidden** component.
2. In the **Label** field, enter `2 Day Moving Avg`.
3. In the **Property Name** field, enter `chartAverage`.
4. In the **Inputs** table, enter the following:

| ID | Label | Chart Type | Categories | Values |
| --- | --- | --- | --- | --- |
| multiOutput | Price | line | date | price |
| multiOutput | 2 Day Avg | line | date | priceAvg |

![A static image displaying the configuration of the chartAverage Chart component.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/CD_Multi-Row%20Operator-chartAverage.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A06Z&se=2026-11-08T19%3A01%3A06Z&sr=c&sp=r&sig=mKK7JE%2BCVToMNA4HL0m3nMseVq0dljwX9eA2KbDASPs%3D)
5. Click the **Formatting** tab at the top of the configuration window.
  1. In the **X Axis Label** field, enter `Date`.
  2. In the **Y Axis Label (Primary)** field, enter `Price`.
  3. Set **Show Legend** to **Yes (checked)**.

![A static image displaying the Formatting configuration of the chartAverage Chart component.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Dwf_MultiRow_Chart_02(1).jpg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A06Z&se=2026-11-08T19%3A01%3A06Z&sr=c&sp=r&sig=mKK7JE%2BCVToMNA4HL0m3nMseVq0dljwX9eA2KbDASPs%3D)
6. Click **Save**.

### Configure the Button Component

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

1. Drag and drop a **Button** component onto your canvas, placing it below the `dtStocks` **Data Table** component.
2. In the **Property ID**, enter `btnMultiRow`.
3. In the **Label Text** field, enter `Start Multi-Row`.
4. Set the **Action Type** to **Event**.
5. In the **Trigger on Click** field, enter `dwfMultiRow`.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Dwf_MultiRow_Btn.jpg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A06Z&se=2026-11-08T19%3A01%3A06Z&sr=c&sp=r&sig=mKK7JE%2BCVToMNA4HL0m3nMseVq0dljwX9eA2KbDASPs%3D)
6. Click **Save & Close**.
7. **Save** your module.

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

![A static image displaying the module definition to explain the Multi-Row operator.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/CD_Multi-Row%20Operator-module.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A06Z&se=2026-11-08T19%3A01%3A06Z&sr=c&sp=r&sig=mKK7JE%2BCVToMNA4HL0m3nMseVq0dljwX9eA2KbDASPs%3D)

Preview your module in Express View and click the **Start Multi-Row** button. Your chart populates with the data from your Hidden component and displays the average stock prices that have changed over two days.

![A static image displaying the Line Chart for the chartAverage Charts component.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Multi-Row%20Operator%20Express%20View.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A06Z&se=2026-11-08T19%3A01%3A06Z&sr=c&sp=r&sig=mKK7JE%2BCVToMNA4HL0m3nMseVq0dljwX9eA2KbDASPs%3D)

Open the DevTools Console to review the results from the Multi-Row operator. Here, you can see that each row of your data now contains `nextDayPrice`. This result is generated by your Multi-Row operator, taking your original price data and moving it up a row.

![A static image displaying the DevTools Console for the Multi-row operator definition.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Multi-Row%20Operator_DevTools%20Console.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A06Z&se=2026-11-08T19%3A01%3A06Z&sr=c&sp=r&sig=mKK7JE%2BCVToMNA4HL0m3nMseVq0dljwX9eA2KbDASPs%3D)

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.

## Related

- [Data Workflow Component](/data-workflow-component.md)
- [Introduction to Data Workflow](/introduction-to-data-workflow.md)