Table Component

The Table component lets you present information to learners in a table format. The Table component is flexible and can be set with both row heading and column heading, as needed.

This article provides an overview of the Table component, component setup, and examples of Table component configurations.

Component overview

The Table component presents information to learners in a table format in a full-width layout in an Evolve course. The Table component can be configured to display row heading and first table column heading, as needed. There is also an option for setting the Table component to display table rows in a specific layout for smartphones.

The Table component is fully responsive.

Component set up

Follow these steps to add the Table component to a Block:

1. Click Add Component.
2. Use the component search or scroll to find the Table component.
3. Click the Table component and select Add Full.

Click the Edit Component icon on the newly added Table component to begin set up.

General section

In the General section:

Add Table Title, or a Table Display Title, as needed. Table Display Title is seen by learners.

Scroll down and add your Table Body. Use the text editor to style and format your text, as needed.

1. Add Table Instruction Text that tells users how to use the component.
2. Include an Aria Label for screen readers, as needed.

Interaction Label section

In the Interaction Label section, you can enable an Interaction Label. The Interaction Label allows you to add a widget before or after the Table component that can display an icon and label prior to the Table component completion, which changes to a different icon and label once the Table component is completed.

Table section

In the Table section, you add your text to the Table component. Right-click the table for Edit Table and to get additional options when editing, as needed.

Appearance section

In the Appearance section, you configure the Table component’s layout settings:

1. By default, Mobile Layout is enabled. With this setting enabled, table rows are displayed as individual items on mobiles. Toggle to disable Mobile Layout.
2. By default, Row Heading is enabled. With this setting enabled, the first table row is displayed as a heading. Toggle to disable Row Heading.
3. Toggle to enable Column Heading, as needed. Enable Column Heading to display the first table column as a heading.

Component Examples

The Table component gives you some options regarding layout. Below are examples that illustrate different Table component setups:

Example 1 – table without Row Heading and Column Heading.

Example 2 – table displaying both first table row and first table column as a heading.

Did this article help?

Let us know by leaving a star rating or review at the top of this article.