Comment on page
Set table widget content property
This example explains how to update a composition's table widget’s content.
comp.findWidget()widget.setPayload()
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
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) {}
};
})();
Last modified 1yr ago