---
title: "Table Component"
slug: "table-component"
updated: 2025-12-04T19:24:05Z
published: 2025-12-04T19:24:05Z
canonical: "docs.unqork.io/table-component"
---

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

# Table Component

UDesignerClassic Designer

The **Table component** is a component that organizes [components](/v1/docs/module-builder-component-library) into rows and columns for efficient readability. The Table component is similar to the [Columns](/v1/docs/columns-component) component. But, the Columns component can only organize components in vertical groups. The Table component aligns components both vertically and horizontally.

You can use the Table component in the following ways:

- Organize components into columns and rows.
- Display components in a grid-like format.

You can find the Table component in the [Display & Layout](/v1/docs/display-layout) group to the left of the [Module Builder](/v1/docs/introduction-to-the-module-builder).

## About the Configuration Window

> To learn more about general component settings and those that display when a component is associated with Data Models, view our [General Component Settings](/v1/docs/general-component-settings) article.

## Display Settings

| Setting | Description |
| --- | --- |
| **Set Number of Rows** | Sets the number of rows in the table. By default, the Table component has three rows. |
| **Set Number of Columns** | Sets the number of columns in the table. By default, the Table component has three columns. |
| **Display Bordered Cells** | When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) **(ON)**, each cell in the table displays a gray border. By default, this setting is ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) **(OFF)**. |
| **Reduce Padding Between Rows** | Padding sets the amount of space between the border of a table cell and its contents. When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) **(ON)**, the table's padding lessens, bringing rows are closer together. By default, this setting is ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) **(OFF)**. |
| **Display Alternating Colored Rows** | When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) **(ON)**, table rows alternate between gray and white backgrounds. By default, this setting is ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) **(OFF)**. |
| **Highlight Row on Hover** | When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) **(ON)**, individual rows highlight when you hover over them. Use this setting to display related components by row. By default, this setting is ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) **(OFF)**. |
| **Hide Field** | When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) **(ON)**, the table and all components inside it are hidden from the end-user. Use this setting instead of hiding each component. By default, this setting is ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) **(OFF)**. |

[![A static image displaying the Table component's Display settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/display_thumb_0_0(15).jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/display(17).jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D)

## Adding a Table Component

In this example, you'll configure a Table component in a module and display a short survey about an end-user's experience with an application.

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

### Configure the Table Component

This component organizes the other components into columns and rows. That way, your survey displays in a grid-like format.

1. In the Module Builder, drag and drop a **T****able** component onto your canvas.
2. In the Property ID field and Canvas Label Text fields, enter `tableSurvey`.
3. In the **Set Number of Rows** field, enter `2`.
4. Set **Display Bordered Cells** to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) **(ON)**.
5. Set **Display Alternating Colored Rows** to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) **(ON)**.
6. Set **Highlight Row on Hover** to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) **(ON)**.

[![A static image displaying the Table component's Display settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/exampleTable_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/exampleTable.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D)
7. Click **Save Component**.

### Configure the HTML Element Components

Place the first [HTML Element](/v1/docs/html-element-component) component above the **tableSurvey****T****able** component to provide the end-user with instructions about the survey. Then, configure two more HTML Element component inside the Table component to display text the end-user can either agree or disagree with.

#### Configure the First HTML Element Component

1. Drag and drop an **H****TML Element** component onto your canvas, placing it above the **tableSurvey** **T****able** component.
2. In the Property ID field, enter **htmlSurvey**.
3. In the **Content** component field, enter `Please rate your experience in using the application.`
4. In the **Tag** field, enter `h3`.

[![A static image displaying the HTML Element's settings. The Tag and Content fields are highlighted and filled out.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/exampleHTML1_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/exampleHTML1.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D)
5. Click **Save Componente**.

#### Configure the Second HTML Element Component

1. Drag and drop an **H****TML Element** component onto your canvas, placing it in the top-left cell of the **tableSurvey** **T****able** component.
2. In the Property ID field, enter **htmlEasy**.
3. In the **Content** field, enter `The application was easy to use.`
4. Click **Save Component**.

#### Configure the Third HTML Element Component

1. Drag and drop an **H****TML Element** component onto your canvas, placing it in the bottom-left cell of the **tableSurvey** **T****able** component.
2. In the Property ID field, enter **htmlHelpful**.
3. In the **Content** field, enter `I found the documentation thorough and helpful.`
4. Click **Save Component**.

After adding the Table and HTML Element components, your canvas looks like the following in the Module Builder:

[![A static image displaying the Module Editor's Canvas. The Table component and three HTML components help shape how the survey will look.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/builderView_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/builderView.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D)

### Configure the Radio Buttons Components

Configure two [Radio Buttons](/v1/docs/radio-buttons-component) components for the end-user to rate their experience. Apart from their **Property IDs**, all other settings are the same.

1. Drag and drop two **R****adio Buttons** components onto your canvas, placing them in the top and bottom rows of the **tableSurvey** **T****able** component's middle column.
2. Complete the Property ID and Label Text fields as follows:

| Property ID | Label Text |
| --- | --- |
| **radioEasy** | Please select one: |
| **radioHelpful** | Please select one: |
3. Navigate to each component's **Data** settings.
4. In the **Values** table of each component, enter the following:

|  | Label | Value |
| --- | --- | --- |
| 1 | Strongly Agree | stronglyAgree |
| 2 | Agree | agree |
| 3 | Neutral | neutral |
| 4 | Disagree | disagree |
| 5 | Strongly Disagree | stronglyDisagree |

[![A static image displaying one of the Radio buttons component's configuration window. The Values table is displayed and the Option Label and Value to Store fields are filled out.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/rdoButtonsEasy_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/rdoButtonsEasy.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D)
5. Navigate to each component's **Validation** settings.
6. Set **Required** to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) **(ON)**.
7. Click **Save Component** for each component as you complete it.

### Configure the Text Area Components

Lastly, configure two [Text Area](/v1/docs/text-area-component) components to each cell in the far right column for the end-user to add comments. Apart from their **Property IDs**, all other settings are the same.

1. Drag and drop two **![Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/text_area_teal_component(3).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) Text Area** components onto your canvas, placing them in separate cells of the right-most **tableSurvey** **T****able** component column.
2. Complete the Property ID and Label Text fields as follows:

| Property ID | Label Text |
| --- | --- |
| **commentEasy** | Additional Comments |
| **commentHelpful** | Additional Comments |
3. Click **Save Component** for each component as you add it.
4. **Save** your module

Preview your module in Express View. Here's how your module displays:

[![A static image displaying the module in Express View. The Table component sorts the other components into an orderly list of rows and columns.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/expressView_thumb_0_0(2).jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/expressView(4).jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D)

The **Table component** is a component that organizes [components](/v1/docs/module-builder-component-library) into rows and columns for efficient readability. The Table component is similar to the [Columns](/v1/docs/columns-component) component. But, the Columns component can only organize components in vertical groups. The Table component aligns components both vertically and horizontally.

You can use the Table component in the following ways:

- Organize components into columns and rows.
- Display components in a grid-like format.

You can find the Table component in the [Display & Layout](/v1/docs/display-layout) group to the left of the [Module Builder](/v1/docs/introduction-to-the-module-builder).

## About the Configuration Window

> To learn more about general component settings and those that display when a component is associated with Data Models, view our [General Component Settings](/v1/docs/general-component-settings) article.

## Display Panel

[![A static image displaying the Table component's Display settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Table_Component_Display_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Table%20Component%20Display.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D)

| Setting | Description |
| --- | --- |
| **Set Number of Rows** | Sets the number of rows in the table. By default, the Table component has three rows. |
| **Set Number of Columns** | Sets the number of columns in the table. By default, the Table component has three columns. |
| **Display Bordered Cells** | When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) **(ON)**, each cell in the table displays a gray border. By default, this setting is ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) **(OFF)**. |
| **Reduce Padding Between Rows** | Padding sets the amount of space between the border of a table cell and its contents. When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) **(ON)**, the table's padding lessens, bringing rows are closer together. By default, this setting is ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) **(OFF)**. |
| **Display Alternating Colored Rows** | When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) **(ON)**, table rows alternate between gray and white backgrounds. By default, this setting is ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) **(OFF)**. |
| **Highlight Row on Hover** | When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) **(ON)**, individual rows highlight when you hover over them. Use this setting to display related components by row. By default, this setting is ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) **(OFF)**. |
| **Hide Field** | When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) **(ON)**, the table and all components inside it are hidden from the end-user. Use this setting instead of hiding each component. By default, this setting is ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) **(OFF)**. |

## Adding a Table Component

In this example, you'll configure a Table component in a module and display a short survey about an end-user's experience with an application.

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

### Configure the Table Component

This component organizes the other components into columns and rows. That way, your survey displays in a grid-like format.

1. In the Module Builder, drag and drop a **T****able** component onto your canvas.
2. In the Property ID field, enter **tableSurvey**.
3. In the **Set Number of Rows** field, enter `2`.
4. Set **Display Bordered Cells** to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) **(ON)**.
5. Set **Display Alternating Colored Rows** to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) **(ON)**.
6. Set **Highlight Row on Hover** to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) **(ON)**.

[![A static image displaying the Table component's Display settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Table_Component_ExampleTable_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Table%20Component%20ExampleTable.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D)
7. Click **Save & Close**.

### Configure the HTML Element Components

Place the first [HTML Element](/v1/docs/html-element-component) component above the **tableSurvey****T****able** component to provide the end-user with instructions about the survey. Then, configure two more HTML Element component inside the Table component to display text the end-user can either agree or disagree with.

#### Configure the First HTML Element Component

1. Drag and drop an **H****TML Element** component onto your canvas, placing it above the **tableSurvey** **T****able** component.
2. In the Property ID and Label Text fields, enter **htmlSurvey**.
3. In the **Tag** field, enter `h3`.
4. In the **Content** component field, enter `Please rate your experience in using the application.`

[![A static image displaying the HTML Element's settings. The Tag and Content fields are highlighted and filled out.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Table_Component_ExampleHTML1_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Table%20Component%20ExampleHTML1.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D)
5. Click **Save & Close**.

#### Configure the Second HTML Element Component

1. Drag and drop an **H****TML Element** component onto your canvas, placing it in the top-left cell of the **tableSurvey** **T****able** component.
2. In the Property ID and Label Text fields, enter **htmlEasy**.
3. In the **Content** field, enter `The application was easy to use.`
4. Click **Save & Close**.

#### Configure the Third HTML Element Component

1. Drag and drop an **H****TML Element** component onto your canvas, placing it in the bottom-left cell of the **tableSurvey** **T****able** component.
2. In the Property ID and Label Text fields, enter **htmlHelpful**.
3. In the **Content** field, enter `I found the documentation thorough and helpful.`
4. Click **Save & Close**.

After adding the **T****able** and three **H****TML Element** components, your canvas looks like the following in Express View:

[![A static image displaying the Module Editor's Canvas. The Table component and three HTML components help shape how the survey will look.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Table_Component_ExampleCanvas1_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Table%20Component%20ExampleCanvas1.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D)

### Configure the Radio Buttons Components

Configure two [Radio Buttons](/v1/docs/radio-buttons-component) components for the end-user to rate their experience. Apart from their **Property IDs**, all other settings are the same.

1. Drag and drop two **R****adio Buttons** components onto your canvas. Place these Radio components in the top and bottom rows of the **tableSurvey** **T****able** component's middle column.
2. Complete the Property ID and Label Text fields as follows:

| Property ID | Label Text |
| --- | --- |
| **radioEasy** | Please select one: |
| **radioHelpful** | Please select one: |
3. From the component's configuration window, select **D****ata**.
4. In the **Values** table of each component, enter the following:

|  | Option Label | Value to Store in Submission Data |
| --- | --- | --- |
| 1 | Strongly Agree | stronglyAgree |
| 2 | Agree | agree |
| 3 | Neutral | neutral |
| 4 | Disagree | disagree |
| 5 | Strongly Disagree | stronglyDisagree |

[![A static image displaying one of the Radio buttons component's configuration window. The Values table is displayed and the Option Label and Value to Store fields are filled out.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Table_Component_ExampleRadio_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Table%20Component%20ExampleRadio.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D)
5. From the component's configuration window, select ![Validation Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/validation_teal_icon(8).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) Validation.
6. Set **Required** to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) **(ON)**.
7. **Save & Close** each component as you complete it.

### Configure the Text Area Components

Lastly, configure two [Text Area](/v1/docs/text-area-component) components to each cell in the far right column for the end-user to add comments. Apart from their **Property IDs**, all other settings are the same.

1. Drag and drop two **![Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/text_area_teal_component(3).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) Text Area** components onto your canvas. Place the Text Area components in separate cells of the rightmost **tableSurvey** **T****able** component column.
2. Complete the Property ID and Label Text fields as follows:

| Property ID | Label Text |
| --- | --- |
| **commentEasy** | Additional Comments |
| **commentHelpful** | Additional Comments |
3. **Save & Close** each component as you add it.
4. **Save** your module

Preview your module in Express View. Here's how your module displays:

[![A static image displaying the module in Express View. The Table component sorts the other components into an orderly list of rows and columns.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Table_Component_ExampleExpressView_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Table%20Component%20ExampleExpressView.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D)

## Resources

- [Modify the Table component using the toolbar settings](/v1/docs/component-toolbar-settings).
- [Learn about more display and layout components](/v1/docs/display-layout).
- [Discover updates, bug fixes, and enhancements to the Table component on the Community Hub](https://community.unqork.com/feature-history-41/table-component-resources-enhancements-bug-fixes-and-updates-13334).

End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product.

End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product.

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 .

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.