---
title: "Sort Operator"
slug: "sort-operator"
updated: 2025-09-26T16:51:24Z
published: 2025-09-26T16:51:24Z
canonical: "docs.unqork.io/sort-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.

# Sort Operator

UDesignerClassic Designer

## Overview

The **Sort operator** helps you organize table data in ascending or descending order. This operator is specifically useful when you want to prioritize, group, or analyze values in your application.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/SortOperator_Udesigner_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A07Z&se=2026-11-09T04%3A51%3A07Z&sr=c&sp=r&sig=%2BsGWVorK9zLUB%2FsZXBTJqJ5vK1UfqdQQYuuh6g6ZMGQ%3D)

You'll find the Sort operator under the [Table operators](/v1/docs/introduction-to-data-workflow-table-operators) group to the left of the [Data Workflow](/v1/docs/data-workflow-component) canvas.

## About the Info Window

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

| Info |
| --- |
| **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. |
| **Sort Keys** | Defines the key (column) by which you want to sort the table. Enter `_arg` in this field to sort by the value passing into the operator's argument port. |
| **Asc/Desc** | Defines if you want to sort the table in ascending or descending order. Enter either `asc` or `desc`. If not defined, the Sort order defaults to ascending. > [!WARNING] > This setting is case-sensitive. Use `asc` or `desc`, not `Asc` or `Desc`. |

## Adding a Sort Operator

Now, let's explore the Sort operator to sort table data. This example predefines the sort order as ascending. You can test it by adjusting the sort order to descending, too. Later, in Express View, you can use a Dropdown component to pick the key (column) to sort the table by.

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

### Configure the Data Table Component

You'll begin by adding a [Data Table](/v1/docs/data-table-component) component and populate it with data that you want to sort.

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:

|  | A | B |
| --- | --- | --- |
| 1 | age | firstName |
| 2 | 43 | Mitsue |
| 3 | 17 | Leota |
| 4 | 28 | Abel |
| 5 | 91 | Alishia |
| 6 | 26 | Willow |
| 7 | 42 | Jose |
| 8 | 75 | Emerson |

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/SortOperator_Datatable_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A07Z&se=2026-11-09T04%3A51%3A07Z&sr=c&sp=r&sig=%2BsGWVorK9zLUB%2FsZXBTJqJ5vK1UfqdQQYuuh6g6ZMGQ%3D)
4. Click **Save Component**.

### Configure the Dropdown Component

Next, add a [Dropdown](/v1/docs/dropdown-component) component to select the key to sort the table by. The keys correspond to the column headers in your Data Table component. You'll define the **age** and **firstName** keys in the Dropdown component's Values table.

1. Drag and drop a **Dropdown** component onto your canvas, placing it below the **Data Table** component.
2. In the Property ID field, enter **sortBy**.
3. In the Label Text, enter `Sort by:`.
4. In the **Values** table, enter the following:

|  | Option Label | Data Source Values |
| --- | --- | --- |
| 1 | Age (Youngest to Oldest) | age |
| 2 | First Name (Alphabetical Order) | firstName |

> [!NOTE]
> These Option Labels set the Sort operator to sort in ascending order. If you decide to sort in descending order, remember to adjust the Option Labels.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/SortOperator_Dropdown_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A07Z&se=2026-11-09T04%3A51%3A07Z&sr=c&sp=r&sig=%2BsGWVorK9zLUB%2FsZXBTJqJ5vK1UfqdQQYuuh6g6ZMGQ%3D)
5. Click **Save Component**.

### Configure the Data Workflow Component

Next, you'll configure the [Data Workflow](/v1/docs/data-workflow-component) component, which performs the sort operation.

1. Drag and drop a **D****ata Workflow** onto your canvas, placing it below the **sortBy** **Dropdown** component.
2. In the Property ID and Canvas Label Text fields, enter `dwfSort`.

#### Configure the Input Operators

1. Drag and drop an **I****nput** operator onto your **D****ata Workflow** canvas.
2. Configure the operator's **Info** window as follows:

| Info |
| --- |
| Category | Input |
| Component | dtTable |
| Required | Yes |
| Source | Default |
3. Drag and drop a another **I****nput** operator onto your **D****ata Workflow** canvas.
4. Configure the second operator's **Info** window as follows:

| Info |
| --- |
| Category | Input |
| Component | sortBy |
| Required | Yes |
| Source | Default |

#### Configure the Sort Operator

Now set up the Sort operator. There are two settings to pay attention to in the Info window:

- **Sort Keys**: Enter `_arg` here because you're using the **sortBy****I****nput** operator's value to set the sort key. The `_arg` statement acts as an alias for whatever input is coming into the Sort operator's argument port.
- **Asc/Desc**: Entering `asc `sorts by the specified key in ascending order. Entering desc sorts by the specified key in descending order. Here, enter `asc`, but feel free to try both options.

1. Drag and drop a **S****ort** operator onto your **D****ata Workflow** canvas.
2. Configure the operator's **Info** window as follows:

| Info |
| --- |
| Category | Sort |
| Label | Sort Data |
| Sort Keys | _arg |
| Asc/Desc | asc |
3. Connect the output port (right) of the **dtTable** **I****nput** operator to the input port (left) of the **Sort Data** **S****ort** operator.
4. Connect the output port (right) of the **sortBy** **I****nput** operator to the argument port (top) of the **Sort Data** **S****ort** operator.

#### Configure the First Console Operator

Now, add a [Console](/v1/docs/console-operator) operator before the Sort operator to view the current order in the DevTools Console.

1. Drag and drop a **C****onsole** operator onto your **D****ata Workflow** canvas.
2. Configure the operator's **Info** window as follows:

| Info |
| --- |
| Category | Console |
| Label | Before Sorting |
3. Connect the output port (right) of the **dtTable** **I****nput** operator to the input port (left) of the **Before Sorting** **C****onsole** operator.

#### Configure the Second Console Operator

Then, add a second Console operator to view the sorted data after the data passes through the Sort operator.

1. Drag and drop another **C****onsole** operator onto your **D****ata Workflow** canvas.
2. Configure the operator's **Info** window as follows:

| Info |
| --- |
| Category | Console |
| Label | After Sorting |
3. Connect the output port (right) of the **Sort Data** **S****ort** operator to the input port (left) of the **After Sorting** **C****onsole** operator.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/SortOperator_DataWorkflow_thumb_0_0(1).jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A07Z&se=2026-11-09T04%3A51%3A07Z&sr=c&sp=r&sig=%2BsGWVorK9zLUB%2FsZXBTJqJ5vK1UfqdQQYuuh6g6ZMGQ%3D)
4. Click **Save Component**.

### Configure the Button Component

Lastly, configure a [Button](/v1/docs/button-component) component to trigger the Data Workflow in Express View.

1. Drag and drop a **Button** component onto your canvas, placing it between the **sortBy** **Dropdown** and **dwfSort****D****ata Workflow** component.
2. In the Property ID field, enter **btnRunDWF**.
3. In the Label Text field, enter `Run Sort`.
4. From the **Action Type** drop-down, select **Event**.
5. From the **On Click** drop-down, select **dwfSort**.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/SortOperator_Button_thumb_0_0(1).jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A07Z&se=2026-11-09T04%3A51%3A07Z&sr=c&sp=r&sig=%2BsGWVorK9zLUB%2FsZXBTJqJ5vK1UfqdQQYuuh6g6ZMGQ%3D)
6. Click **Save Component**.
7. **Save** your module.

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

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Sort_ModuleBuilder_thumb_0_0(1).jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A07Z&se=2026-11-09T04%3A51%3A07Z&sr=c&sp=r&sig=%2BsGWVorK9zLUB%2FsZXBTJqJ5vK1UfqdQQYuuh6g6ZMGQ%3D)

**Preview** your module in Express View and open the DevTools Console. Click **Run Sort** and view the data getting sorted based on age.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/SortOp_Output_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A07Z&se=2026-11-09T04%3A51%3A07Z&sr=c&sp=r&sig=%2BsGWVorK9zLUB%2FsZXBTJqJ5vK1UfqdQQYuuh6g6ZMGQ%3D)

## Overview

The **Sort operator** helps you organize table data in ascending or descending order. This is specifically used when you want to prioritize, group, or analyze values in your application.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/SortOperator_Classic_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A07Z&se=2026-11-09T04%3A51%3A07Z&sr=c&sp=r&sig=%2BsGWVorK9zLUB%2FsZXBTJqJ5vK1UfqdQQYuuh6g6ZMGQ%3D)

You'll find the Sort operator under the [Table operators](/v1/docs/introduction-to-data-workflow-table-operators) group to the left of the [Data Workflow](/v1/docs/data-workflow-component) canvas.

## About the Info Window

Here's a breakdown of each setting in the Rename Field operator's 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. |
| Sort Keys | Defines the key (column) by which you want to sort the table. Enter `_arg` in this field to sort by the value coming into the operator's argument port. |
| Asc/Desc | Defines if you want to sort the table in ascending or descending order. Enter either `asc` or `desc`. If not defined, the Sort order defaults to ascending. > [!WARNING] > This setting is case-sensitive. Use `asc` or `desc`, not `Asc` or `Desc`. |

## Adding a Rename Field Operator

Now, let's explore the Sort operator to sort table data. This example predefines the sort order as ascending. You can test it by adjusting the sort order to descending, too. Later, in Express View, you can use a Dropdown component to pick the key (column) to sort the table by.

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

### Configure the Data Table Component

You'll begin by adding a [Data Table](/v1/docs/data-table-component) component and populate it with data that you want to sort.

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 `dtTable`.
3. To the left of the component's configuration window, click **D****ata**.
4. In the data table, enter the following:

| A | B |
| --- | --- |
| age | firstName |
| 43 | Mitsue |
| 17 | Leota |
| 28 | Abel |
| 91 | Alishia |
| 26 | Willow |
| 42 | Jose |
| 75 | Emerson |

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/SortOp_Datatable_classic_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A07Z&se=2026-11-09T04%3A51%3A07Z&sr=c&sp=r&sig=%2BsGWVorK9zLUB%2FsZXBTJqJ5vK1UfqdQQYuuh6g6ZMGQ%3D)
5. Click **Save & Close**.

### Configure the Dropdown Component

Next, add a [Dropdown](/v1/docs/dropdown-component) component to select the key to sort the table by. The keys correspond to the column headers in your Data Table component. You'll define the **age** and **firstName** keys in the Dropdown component's Values table.

1. Drag and drop a **Dropdown** component onto your canvas, placing it below the **Data Table** component.
2. In the Property ID field, enter **sortBy**.
3. In the Label Text, enter `Sort by:`.
4. In the **Values** table, enter the following:

| Option Label | Data Source Values |
| --- | --- |
| Age (Youngest to Oldest) | age |
| First Name (Alphabetical Order) | firstName |

> [!NOTE]
> These Option Labels set the Sort operator to sort in ascending order. If you decide to sort in descending order, remember to adjust the Option Labels.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/SortOperator_classic_dropdown_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A07Z&se=2026-11-09T04%3A51%3A07Z&sr=c&sp=r&sig=%2BsGWVorK9zLUB%2FsZXBTJqJ5vK1UfqdQQYuuh6g6ZMGQ%3D)
5. Click **Save & Close**.

### Configure the Data Workflow Component

Next, you'll set up the [Data Workflow](/v1/docs/data-workflow-component) component, which performs the sort operation.

1. Drag and drop a **D****ata Workflow** onto your canvas, placing it below the **sortBy** **![Dropdown Component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/chevron_down_grey_icon(1).png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A07Z&se=2026-11-09T04%3A51%3A07Z&sr=c&sp=r&sig=%2BsGWVorK9zLUB%2FsZXBTJqJ5vK1UfqdQQYuuh6g6ZMGQ%3D)** **Dropdown** component.
2. In the Canvas Label Text and Property ID fields, enter `dwfSort`.

#### Configure the Input Operators

1. Drag and drop an **I****nput** operator onto your **D****ata Workflow** canvas.
2. Configure the **I****nput** operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Input |
| Component | dtTable |
| Required | Yes |
| Source | Default |
3. Drag and drop a second **I****nput** operator onto your **D****ata Workflow** canvas.
4. Configure the second operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Input |
| Component | sortBy |
| Required | Yes |
| Source | Default |

#### Configure the Sort Operator

Now set up the Sort operator. There are two settings to pay attention to in the Info window:

- **Sort Keys**: Enter `_arg` here because you're using the **sortBy** **I****nput** operator's value to set the sort key. The _arg statement acts as an alias for whatever input is coming into the Sort operator's argument port.
- **Asc/Desc**: Entering `asc `sorts by the specified key in ascending order. Entering `desc `sorts by the specified key in descending order. Here, enter `asc`, but feel free to try both options.

1. Drag and drop a **S****ort** operator onto your **D****ata Workflow** canvas.
2. Configure the operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Sort |
| Label | Sort Data |
| Sort Keys | _arg |
| Asc/Desc | asc |
3. Connect the output port (right) of the **dtTable** **I****nput** operator to the input port (left) of the **Sort Data****S****ort** operator.
4. Connect the output port (right) of the **sortBy** **I****nput** operator to the argument port (top) of the **Sort Data****S****ort** operator.

#### Configure the First Console Operator

Now, add a [Console](/v1/docs/console-operator) operator before the Sort operator to view the current order in the DevTools Console.

1. Drag and drop a **C****onsole** operator onto your **D****ata Workflow** canvas.
2. Configure the operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Console |
| Label | Before Sorting |
3. Connect the output port (right) of the **dtTable****I****nput** operator to the input port (left) of the **Before Sorting****C****onsole** operator.

#### Configure the Second Console Operator

Then, add a second Console operator to view the sorted data after the data passes through the Sort operator.

1. Drag and drop another **C****onsole** operator onto your **D****ata Workflow** canvas.
2. Configure the operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Console |
| Label | After Sorting |
3. Connect the output port (right) of the **Sort Data****S****ort** operator to the input port (left) of the **After Sorting** **C****onsole** operator.
4. Click **Save**.

Here's how the completed Data Workflow looks:

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/SortOperator_DW_classic_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A07Z&se=2026-11-09T04%3A51%3A07Z&sr=c&sp=r&sig=%2BsGWVorK9zLUB%2FsZXBTJqJ5vK1UfqdQQYuuh6g6ZMGQ%3D)

### Configure the Button Component

Lastly, configure a [Button](/v1/docs/button-component) component to trigger the Data Workflow in Express View.

1. Drag and drop a **Button** component onto your canvas, placing it between the **sortBy** **![Dropdown Component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/chevron_down_grey_icon(1).png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A07Z&se=2026-11-09T04%3A51%3A07Z&sr=c&sp=r&sig=%2BsGWVorK9zLUB%2FsZXBTJqJ5vK1UfqdQQYuuh6g6ZMGQ%3D)** **Dropdown** and **dwfSort****D****ata Workflow** component.
2. In the Property ID field, enter **btnRunDWF**.
3. In the Label Text field, enter `Run Sort`.
4. To the left of the component's configuration window, click **Actions**.
5. Set the **Action Type** as **Event**.
6. From the **On Click** drop-down, select **dwfSort**.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/SortOperator_classic_button_thumb_0_0(1).jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A07Z&se=2026-11-09T04%3A51%3A07Z&sr=c&sp=r&sig=%2BsGWVorK9zLUB%2FsZXBTJqJ5vK1UfqdQQYuuh6g6ZMGQ%3D)
7. Click **Save & Close**.
8. **Save** your module

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

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/SortOperator_Classic_Configuration_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A07Z&se=2026-11-09T04%3A51%3A07Z&sr=c&sp=r&sig=%2BsGWVorK9zLUB%2FsZXBTJqJ5vK1UfqdQQYuuh6g6ZMGQ%3D)

**Preview** your module in Express View and open the DevTools Console. Click Run Sort and view the data getting sorted based on age.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/SortOp_Output_thumb_0_0(1).jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A07Z&se=2026-11-09T04%3A51%3A07Z&sr=c&sp=r&sig=%2BsGWVorK9zLUB%2FsZXBTJqJ5vK1UfqdQQYuuh6g6ZMGQ%3D)

## Resources

- [Input/Output Operators](/v1/docs/introduction-to-data-workflow-io-operators).
- [Gateway Operators](/v1/docs/introduction-to-data-workflow-gateways-operators).
- [Table Operators Landing Page.](/v1/docs/table-operators)
- [Array Operators Landing Page.](/v1/docs/array-operators)
- [Modifying Data Workflow Operators](/v1/docs/modifying-data-workflow-operators).

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.

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.

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 DevTools Console helps you securely store, build, test, and deploy your software.