Links
Comment on page

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. 1.
    Double-click the Standings sub-composition in the composition tree.
  2. 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. 1.
    Open the composition script editor within the same example composition as above and select the Lower composition script.
  2. 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) {}
};
})();