Table.png

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.

Property Settings 

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

ContentArea for JSON of your table content.

Example JSON

{ "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" } ]
}

Layout

table_widget_3.png

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 LayoutOption to see the layout separately from the JSON content.

Style

table_widget_4.png

CompositionThe 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.

Edit Button - Building the Table Widget Elements

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.

Adding an Image and Text Widgets

 

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.  

Adding Control Nodes with the Node Link Browser

 

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 TransitionHow each row on screen when updated to a new page. Options are Top to BottomBottom to TopLeft to RightRight to Left and Random.

Transition OffsetOffset (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.

Control

table_widget_7.png

Current PageCan set current page that is visible. You can have a large amount of pages if you have a lot of sets in your data.

Was this article helpful?
0 out of 0 found this helpful

Comments

0 comments

Please sign in to leave a comment.