Table Widget

Follow

The Table Widget is an Advanced Widget used to create table-structured data overlays in your Composition.

To learn how to add a Widget to your Composition, click here.

Remember, any underlined widget properties can be connected to a Control Node or a Data Node.

Properties 

As seen above, select the "Table" tab in the Property Panel to update this widget's following property types: Content, Layout, Style and Control.

Table Widget Tutorial

Download this example template to see the final result of a Table Widget connected to a Table Control Node. The following tutorial can be created in the same Composition with a brand new Sub-composition.

1. Add a Table Widget

Add the "Table" Widget from the Add >> Widget menu in the upper left corner of Composer.

2. Hit "Edit" to Build the Table Widget Elements

Hit the "Edit" button in the widget's Style property box. This is where you'll add your desired row Widgets.

Edit Composition Button in Table Widget

3. Add Widgets and Connect Control Nodes

Add Widgets

Add your desired Row widgets such as images, text and more. In this example, we will build a very basic Premier League Standings table graphic. We will add the following Widgets organized from left to right on the screen:

• Text Widget: rename to Position
• Image Widget: rename to Logo
• Text Widget: rename to Club
• Text Widget: rename to Points

4 Widgets Organized in a Row

Create and Connect Control Nodes

Then we will Create 4 Control Nodes (Position, Logo, Club, Points) and connect them appropriately to the Widget properties: 

• Number Control Node titled "Position"
• Image Control Node titled "Logo"
• Text Control Node titled "Club"
• Number Control Node titled "Points"

All 4 Control Nodes Created and Connected

Ensure that your Position and Points Number Control Nodes have Step set to 1.

4. Create and Connect the Table Control Node

Navigate up in the Tree back to the level of the Table widget. Then select the "Content" underlined property and create the Table Control Node by selecting "Add". 

Creating the Table Control Node from "Content" property

You will now see the connected Table Control Node displayed inside the Control Node Panel.

5. Add Nested Control Nodes

As you might be able to tell, the Table Control Node functions as a container for all your Table's individual Control Nodes. These Control Nodes that live inside of the Table Control Node will function as all the controls for the individual table elements.

Add Control Nodes that are identical (in name and settings) to the ones inside the Table Widget or it will not work. Make sure to have the Table Control Node selected before adding new control nodes to ensure they get placed inside. 

In this instance, for our simple Standings graphic, we will once again add:

• Number Control Node titled "Position"
• Image Control Node titled "Logo"
• Text Control Node titled "Club"
• Number Control Node titled "Points"

Don't forget to ensure your Position and Points Number Control Nodes have Step set to 1 (as we did in the tutorial step 3).

Created Control Nodes within Table Control Node

These Control Nodes don't need to be connected to anything. Because they are inside the Table Control Node, they are looking inside the Table Widget to find where to send the information.

6. Validate First Row, Add Additional Rows, Sort

Validate First Row

Now that you have everything set up, let's validate everything works by populating our first row of data. Click on your first row to bring up the "Editing row" menu:

After adding in your information, Click the X button to go back to the main list of rows. You will then see the Update button appear. Make sure to select it to see your changes take place.

If everything was set up properly, you should be able to see your first row of data appear in the preview window:

First Row of Data Appears in Preview Window

Add Additional Rows (as Needed)

Next, add additional rows and fill in the rest of your data as needed. To add another row, scroll to the bottom of your existing table and select "Add Row". Don't forget to hit the blue Update button after adding new information.

Remember, everything in the Control Node panel will be available to your operator. They are able to add and delete rows of data before and during a live production.

Sort

Note that you can sort your row data by Column information. Select the three dot menu next to your desired Column and choose "Sort Ascending" or "Sort Descending". This option appears for Text Controls (alphabetical) or Number Controls (high vs low). 

Sorting Rows Based on Column Data

In this case, we want the most points to be listed first. On the Points column, we will choose "Sort Ascending". 

I you enable "Allow sorting" in your Table Control Node properties, you can allow your operator to sort as desired.

Fully Populated Table Widget

7. Refine the Table Widget Properties

Within the Table Widget's "Layout", "Style" and"Control" property boxes to make any desired modifications. For this use case, we recommend setting the Elements per page to 10 and maintain all the other existing settings.

Table Widget Properties

8. Dial in the Table Control Node Properties

There are several properties you can modify for your Table Control Node to ensure your operator has the best data entry and management experience for your use case. 

For example, if you want to allow your operator to sort the rows (as we just did in step 7), make sure "Allow sorting" is checked. If you'd like them to only have 10 rows of data to work with (or in our case, 10 teams), set that "Max rows (data)" number to 10.

Dial in your settings as desired.

For more specifics on the Table Control Node, visit this Table Control Node article. Note that the Table Control Node works with the Grid Widget.

9. Export/Import Table Data (optional)

In the control app or within Composer, access the main Table menu in the upper left corner of the Table controls for accessing copying, pasting and downloading prompts.

Google Sheets

The Table Control Node is powerful. You have to option to prepare your data in Google Sheets and paste into the Table controls. Start with "Copy for Google Sheets" to acquire the proper formatting before making modifications and extensions in your Google Sheet and pasting back into the Table controls. 

CSV and JSON

You can also download your data from the table controls into a CSV or JSON format.