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.
Content - Area for JSON of your table content.
{ "content":
[ { "Pos":"1.", "Name":"McLaren", "Nationality":"https://upload.wikimedia.org/wikipedia/commons/thumb/3/3e/Flag_of_New_Zealand.svg/2000px-Flag_of_New_Zealand.svg.png", "Constructor": "Cooper-Climax" },
{ "Pos":"2.", "Name":"Hill", "Nationality":"https://vignette.wikia.nocookie.net/in-the-name-of-the-tsar/images/e/e0/0_o0-6o1W1DKmI5LbX.png/revision/latest?cb=20190321092930", "Constructor": "Ferrari" },
{ "Pos":"3.", "Name":"Bandini", "Nationality":"https://cdn.shopify.com/s/files/1/1166/0602/products/italy-flag_1024x1024.jpeg?v=1457043237", "Constructor": "Ferrari" },
{ "Pos":"4.", "Name":"Surtees", "Nationality":"https://qph.fs.quoracdn.net/main-qimg-5a74d299f3b3cd43ef8d732cf95a07be", "Constructor": "Lola-Climax" },
{ "Pos":"5.", "Name":"Bonnier", "Nationality":"https://upload.wikimedia.org/wikipedia/en/4/4c/Flag_of_Sweden.svg", "Constructor": "Porsche" },
{ "Pos":"6.", "Name":"Hill", "Nationality":"https://qph.fs.quoracdn.net/main-qimg-5a74d299f3b3cd43ef8d732cf95a07be", "Constructor": "BRM" },
{ "Pos":"7.", "Name":"Mairesse", "Nationality":"https://media.istockphoto.com/illustrations/belgium-flag-illustration-id843135746?k=6&m=843135746&s=612x612&w=0&h=2zjobbvUWJ9l1_m_2RszqT3dyyhBhNNDYBpxH7aKqkU=", "Constructor": "Ferrari" },
{ "Pos":"8.", "Name":"Brabham", "Nationality":"https://cdn.britannica.com/78/6078-004-A4F193DB/Flag-Australia.jpg", "Constructor": "Lotus-Climax" },
{ "Pos":"9.", "Name":"Ireland", "Nationality":"https://qph.fs.quoracdn.net/main-qimg-5a74d299f3b3cd43ef8d732cf95a07be", "Constructor": "Lotus-Climax" },
{ "Pos":"10.", "Name":"Clark", "Nationality":"https://qph.fs.quoracdn.net/main-qimg-5a74d299f3b3cd43ef8d732cf95a07be", "Constructor": "Lotus-Climax" } ]
}
Direction - How the rows are laid out. Options are Horizontal or Vertical.
Elements per page - Amount of rows visible on each page.
Line Spacing - Spacing (in %) between each row of content.
Show Layout - Option to see the layout separately from the JSON content.
Composition - The Table Widget is an Advanced Widget. This means it requires another layer of customization. In order to build the contents of this Table Widget, you have to hit this Edit button.
After hitting the "Edit" button in the Style property box, you'll have to add widgets and then connect them to Control Nodes that are named the same as the property categories in your JSON. We are using the example JSON so we will be creating a table of names, flags and so forth. For this, we will need to add an Image Widget and three Text Widgets. We arranged ours with the Image Widget to the left and the Text Widget to the right.
For these elements to work properly with your JSON, you have to create Control Nodes for the Image and Text Widgets. Add connected Control Nodes by using the Node Link Browser. Make sure to name them as they are named in the JSON: call your Image Control Node "Nationality" and your Text Control Nodes "Pos", "Name" and "Constructor". This is very important because we use this exact naming in our example JSON playlist. If you do not name the Control Nodes in this way, the Table Widget will not work.
Go back to the root level of this Widget to see the information displayed properly in a Table format.
Update Style - Type of animation used for when the content is updated. Options are Update Animation or Timeline Animation.
Page Transition - How each row on screen when updated to a new page. Options are Top to Bottom, Bottom to Top, Left to Right, Right to Left and Random.
Transition Offset - Offset (in seconds) between each row animation on screen. For example, the top row could animate on and then one second later, the next row animates on.
Current Page - Can set current page that is visible. You can have a large amount of pages if you have a lot of sets in your data.
Comments
0 comments