---
title: "How to: Append Tables Using the Append Operator"
slug: "append-operator-appending-tables"
updated: 2025-12-23T15:14:00Z
published: 2025-12-23T15:14:00Z
canonical: "docs.unqork.io/append-operator-appending-tables"
---

> ## 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: Append Tables Using the Append Operator

UDesignerClassic Designer

The **Append operator** is commonly used to append values, but it can also combine two tables of different information.

## Configuration

In this how-to guide, you'll create an application that combines two tables. First, you'll configure two [Data Table](/v1/docs/data-table-component) components to serve as your inputs. Then, you'll use a [Data Workflow](/v1/docs/unqorks-data-workflow-operators) to append them. The appended result will display the records from the first table, followed by the records from the second table.

> [!NOTE]
> These instructions assume you’re working in a new module that has been opened, saved, and given a title.

### Configure the First Data Table Component

You'll begin by adding your first [Data Table](/v1/docs/data-table-component) component to store data you'll bring into your Data Workflow. This sample data consists of a list of dogs, names, and breeds.

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

| A | B |
| --- | --- |
| name | breed |
| Ivy | Golden Retriever |
| Lucy | Golden Retriever |
| Wally | Hound |
4. Click **Save Component**.

### Configure the Second Data Table Component

The second [Data Table](/v1/docs/data-table-component) component contains another list of dogs, names, and breeds.

1. Drag and drop a second **Data Table** component onto your canvas, placing it below your first Data Table component.
2. In the **Property ID** field, enter `dtBreeds`.
3. In the data table, enter the following:

| A | B |
| --- | --- |
| name | breed |
| Nacho | Pug |
| Thor | Corgidor |
| Holly | Golden Retriever |
4. Click **Save Component**.

### Configure the Hidden Component

Next, add a [Hidden](/v1/docs/hidden-component) component to serve as the primary output for your Data Workflow. Later, you'll set up a [ViewGrid](/v1/docs/viewgrid-component) component to reference the data from the [Hidden](/v1/docs/hidden-component) component and display your combined tables.

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

### Configure the ViewGrid Component

To display your combined tables, configure a [ViewGrid](/v1/docs/viewgrid-component) component. This ViewGrid component references the data from the [Hidden](/v1/docs/hidden-component) component. Here, you'll set the column labels to **Name** and **Breed**, as you did in the [Data Table](/v1/docs/data-table-component) components.

1. Drag and drop a **ViewGrid** component onto your canvas, placing it below your Hidden component.
2. In the **Property ID** and **Canvas** **Label Text** fields, enter `gridAppendedTables`.
3. In the **Inputs** table, in the **Source** column, enter `appendedTableValue`.
4. In the **Display** table, enter the following:

| ID | Formula | Heading |
| --- | --- | --- |
| name |  | Name |
| breed |  | Breed |

![Grid layout displaying input and output fields for data mapping and display settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD_View%20Grid.png?sv=2026-02-06&spr=https&st=2026-11-07T20%3A53%3A44Z&se=2026-11-07T21%3A53%3A44Z&sr=c&sp=r&sig=TR1It9jXG56OHbhpDKMo0FHTUQ3oZgkeZc%2FzMs54aJk%3D)
5. Click **Save Component**.

### Configure the Data Workflow Component

Next, you'll add your [Data Workflow](/v1/docs/unqorks-data-workflow-operators) component and bring in both [Data Table](/v1/docs/data-table-component) components using two [Input](/v1/docs/input-operator) operators. Then, you'll add an [Append](/v1/docs/append-operator) operator to combine both tables. Lastly, you'll send the result to your Hidden component using an [Output](/v1/docs/output-operator) operator.

1. Drag and drop a **Data Workflow** component onto your canvas, placing it below your ViewGrid component.
2. In the **Property ID** and **Canvas** **Label Text** fields, enter `dwfAppendTables`.
3. From the **Trigger Type** drop-down, select **Watch**.

#### Configure the First 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 | dtDogs |
| Required | Yes |
| Source | Default |

#### Configure the Second 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 | dtBreeds |
| Required | Yes |
| Source | Default |

#### Configure the Append Operator

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

| Setting | Value |
| --- | --- |
| Category | Append |
| Label | Append Tables |
3. Connect the output port (right) of the `dtDogs` **Input** operator to the upper input port (left) of the **Append** operator.
4. Connect the output port (right) of the `dtBreeds` **Input** operator to the lower input port (left) of the **Append** operator.

#### Configure the Output Operator

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 | appendedTableValue |
| Action | value |
3. Connect the output port (right) of the `Append Tables` **Append** operator to the input port (left) of the `appendTableValue` **Output** operator.

![Data workflow diagram showing inputs, append operation, and output for table values.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD_Data%20Workflow.png?sv=2026-02-06&spr=https&st=2026-11-07T20%3A53%3A44Z&se=2026-11-07T21%3A53%3A44Z&sr=c&sp=r&sig=TR1It9jXG56OHbhpDKMo0FHTUQ3oZgkeZc%2FzMs54aJk%3D)
4. Click **Save Component**.
5. **Save** your module.

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

![Highlighted section shows the 'dwfAppendTables' element in a structured data format.](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-07T20%3A53%3A44Z&se=2026-11-07T21%3A53%3A44Z&sr=c&sp=r&sig=TR1It9jXG56OHbhpDKMo0FHTUQ3oZgkeZc%2FzMs54aJk%3D)

Preview your module in Express View. You’ll see your ViewGrid component displaying the data from your individual Data Table components. The appended results display the records from the first table followed by the records from the second.

![Express view image of the Table listing dog names and breeds with submit buttons for each entry.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD_Preview.png?sv=2026-02-06&spr=https&st=2026-11-07T20%3A53%3A44Z&se=2026-11-07T21%3A53%3A44Z&sr=c&sp=r&sig=TR1It9jXG56OHbhpDKMo0FHTUQ3oZgkeZc%2FzMs54aJk%3D)

The **Append operator** is commonly used to append values, but it can also combine two tables of different information.

## Configuration

In this how-to guide, you'll create an application that combines two tables. First, you'll configure two [Data Table](/v1/docs/data-table-component) components to serve as your inputs. Then, you'll use a [Data Workflow](/v1/docs/unqorks-data-workflow-operators) to append them. The appended result will display the records from the first table, followed by the records from the second table.

> [!NOTE]
> These instructions assume you’re working in a new module that has been opened, saved, and given a title.

### Configure the First Data Table Component

You'll begin by adding your first [Data Table](/v1/docs/data-table-component) component to store data you'll bring into your Data Workflow. This sample data consists of a list of dogs, names, and breeds.

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 `dtDogs`.
3. In the data table, enter the following:

| A | B |
| --- | --- |
| name | breed |
| Ivy | Golden Retriever |
| Lucy | Golden Retriever |
| Wally | Hound |
4. Click **Save & Close**.

### Configure the Second Data Table Component

The second [Data Table](/v1/docs/data-table-component) component contains another list of dogs, names, and breeds.

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

| A | B |
| --- | --- |
| name | breed |
| Nacho | Pug |
| Thor | Corgidor |
| Holly | Golden Retriever |
4. Click **Save & Close**.

### Configure the Hidden Component

Next, add a [Hidden](/v1/docs/hidden-component) component to serve as the primary output for your Data Workflow. Later, you'll set up a [ViewGrid](/v1/docs/viewgrid-component) component to reference the data from the [Hidden](/v1/docs/hidden-component) component and display your combined tables.

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

### Configure the ViewGrid Component

To display your combined tables, configure a [ViewGrid](/v1/docs/viewgrid-component) component. This ViewGrid component references the data from the [Hidden](/v1/docs/hidden-component) component. Here, you'll set the column labels to **Name** and **Breed**, as you did in the [Data Table](/v1/docs/data-table-component) components.

1. Drag and drop a **ViewGrid** component onto your canvas, placing it below your Hidden component.
2. In the **Label** and **Property Name** fields, enter `gridAppendedTables`.
3. In the **Inputs** table, in the **ID** column, enter `appendedTableValue`.
4. In the **Display** table, enter the following:

| id | formula | heading |
| --- | --- | --- |
| name |  | Name |
| breed |  | Breed |

![Configuration settings for a grid with inputs and outputs displayed in a user interface.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/CD_ViewGrid.png?sv=2026-02-06&spr=https&st=2026-11-07T20%3A53%3A44Z&se=2026-11-07T21%3A53%3A44Z&sr=c&sp=r&sig=TR1It9jXG56OHbhpDKMo0FHTUQ3oZgkeZc%2FzMs54aJk%3D)
5. Click **Save**.

### Configure the Data Workflow Component

Next, you'll add your [Data Workflow](/v1/docs/unqorks-data-workflow-operators) component and bring in both [Data Table](/v1/docs/data-table-component) components using two [Input](/v1/docs/input-operator) operators. Then, you'll add an [Append](/v1/docs/append-operator) operator to combine both tables. Lastly, you'll send the result to your Hidden component using an [Output](/v1/docs/output-operator) operator.

1. Drag and drop a **Data Workflow** component onto your canvas, placing it below your ViewGrid component.
2. In the **Property ID** and **Canvas** **Label Text** fields, enter `dwfAppendTables`.
3. Set the **Trigger Type** as **Watch**.

#### Configure the First 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 | dtDogs |
| Required | Yes |
| Source | Default |

#### Configure the Second 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 | dtBreeds |
| Required | Yes |
| Source | Default |

#### Configure the Append Operator

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

| Setting | Value |
| --- | --- |
| Category | Append |
| Label | Append Tables |
3. Connect the output port (right) of the `dtDogs` **Input** operator to the upper input port (left) of the **Append** operator.
4. Connect the output port (right) of the `dtBreeds` **Input** operator to the lower input port (left) of the **Append** operator.

#### Configure the Output Operator

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 | appendedTableValue |
| Action | value |
3. Connect the output port (right) of the `Append Tables` **Append** operator to the input port (left) of the `appendTableValue` **Output** operator.

![Data workflow diagram showing input, append, and output processes for tables.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/CD_Data%20Workflow.png?sv=2026-02-06&spr=https&st=2026-11-07T20%3A53%3A44Z&se=2026-11-07T21%3A53%3A44Z&sr=c&sp=r&sig=TR1It9jXG56OHbhpDKMo0FHTUQ3oZgkeZc%2FzMs54aJk%3D)
4. Click **Save.**
5. **Save** your module.

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

![Data structure showing dog breeds and related tables for organization and management.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/CD_Module%20Builder(1).png?sv=2026-02-06&spr=https&st=2026-11-07T20%3A53%3A44Z&se=2026-11-07T21%3A53%3A44Z&sr=c&sp=r&sig=TR1It9jXG56OHbhpDKMo0FHTUQ3oZgkeZc%2FzMs54aJk%3D)

Preview your module in Express View. You’ll see your ViewGrid component displaying the data from your individual Data Table components. The appended results display the records from the first table followed by the records from the second.

![Express view image of the Table listing dog names and breeds with submit buttons for each entry.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD_Preview.png?sv=2026-02-06&spr=https&st=2026-11-07T20%3A53%3A44Z&se=2026-11-07T21%3A53%3A44Z&sr=c&sp=r&sig=TR1It9jXG56OHbhpDKMo0FHTUQ3oZgkeZc%2FzMs54aJk%3D)

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

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

Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field.

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.