Set table widget content property

This example explains how to update a composition's table widget’s content.

Functions covered

• comp.findWidget()

• widget.setPayload()

Load this example composition to follow along in a real composition.

Composition structure

The example composition has one sub-composition called Standings, as you can see in the composition tree.

The Standings sub-composition

To see the sub-composition's payload:

1. Double-click the Standings sub-composition in the composition tree.

2. Select the standingsTable widget and then the table tab in the property panel.

standingsTable's payload

To see this sub-composition's widgets:

1. Open the composition script editor within the same example composition as above and select the Lower composition script.
2. In the composition navigator, select the Widget Explorer tab.

This composition contains three widgets, but for this quick start, you'll look at its Table widget, which is called standingsTable in the composition.

The sub-composition's widgets

Composition script

Now that you've located the composition's table widget, learn how to set its content by reading the comments in the Standings composition script.

You can also copy and paste the composition script below into your own compositions.

Standings Script

(function() {
  return {

    init: function(comp, context) {

      // get reference to the standingsTable widget
      const wiStandingsTable = comp.findWidget("standingsTable")[0];

      // log widget objects to the console
      console.log(wiStandingsTable);

      // define standings data
      const tableData = [{
          "Position": 1,
          "Name": "The Winner",
          "Points": 987
        },
        {
          "Position": 2,
          "Name": "Silver medal",
          "Points": 876
        },
        {
          "Position": 3,
          "Name": "Bronce medal",
          "Points": 765
        },
        {
          "Position": 4,
          "Name": "4th place",
          "Points": 654
        },
        {
          "Position": 5,
          "Name": "5th place",
          "Points": 543
        }
      ];

      // build table content format
      const tableContent = {
        "content": tableData
      };
      
      // update tableContent widget property
      // we stringify the tableContent!
      wiStandingsTable.setPayload({
        "tableContent": JSON.stringify(tableContent)
      });

    },

    close: function(comp, context) {}
  };
})();