Handlebars Helper Training - Tables.js

HandleBarsHelper-Tables.js

{{!This is a Comment -- You can use Comments much like // or ' in other programming languages}}
{{!tablelength submissionForm.tableNameAlias gives number of non empty rows in the table}}
{{!submissionForm.tableNameAlias.[0].rowValue shows the rendered row value as per the table configuration}}
{{!submissionForm.tableNameAlias.[0].fieldValues.alias shows the data of the field for that row}}


Number of Rows in the Table with a Value: {{tableLength submissionForm.favoriteMenuItems}}
<hr/>
<br/>

{{!We have a table with the alias favoriteMenuItem, that table has 2 fields menuItem and price}}
Data from the First Table Row<br/>
Rendered Table Row: {{{submissionForm.favoriteMenuItems.[0].rowValue}}}<br/>
One Field from the Table Row: {{submissionForm.favoriteMenuItems.[0].fieldValues.menuItem}}<br/>
Next Field from the Table Row: {{submissionForm.favoriteMenuItems.[0].fieldValues.price}}
<hr/>
Data from the Second Row<br/>
Rendered Table Row: {{{submissionForm.favoriteMenuItems.[1].rowValue}}}<br/>
One Field from the Table Row: {{submissionForm.favoriteMenuItems.[1].fieldValues.menuItem}}<br/>
Next Field from the Table Row: {{submissionForm.favoriteMenuItems.[1].fieldValues.price}}
<hr/>
<br/>
<br/>


{{!When looping through a table, #if rowValue will determine if the row is empty, 
from there you can directly call the field values, for our sample it is menuItem and price.  
You can also directly call the rendered rowValue which is HTML based}}
<strong>Loop through Table without using array indexes</strong>:<br/>
{{#each submissionForm.favoriteMenuItems}}
	{{#if rowValue}} 
		{{{rowValue}}}
		Menu Item: {{menuItem}}, Price: {{price}}
		<hr/>
	{{/if}}
{{/each}}
<br/>
<br/>
<strong>Loop through Table in Reverse</strong>:<br/>
{{#tableReverse submissionForm.favoriteMenuItems}}
    {{#each this}}
    	{{#if rowValue}} 
    		{{{rowValue}}}
    		Menu Item: {{menuItem}}, Price: {{price}}
    		<hr/>
    	{{/if}}
    {{/each}}
{{/tableReverse}}
<br/>
<br/>
<strong>Sort Table by Row Value</strong>:<br/>
{{#tableSort submissionForm.favoriteMenuItems "asc"}}
    {{#each this}}
    	{{#if rowValue}} 
    		{{{rowValue}}}
    		Menu Item: {{menuItem}}, Price: {{price}}
    		<hr/>
    	{{/if}}
    {{/each}}
{{/tableSort}}
<br/>
<br/>
<strong>Sort Table by Row Value Descending</strong>:<br/>
{{#tableSort submissionForm.favoriteMenuItems "desc"}}
    {{#each this}}
    	{{#if rowValue}} 
    		{{{rowValue}}}
    		Menu Item: {{menuItem}}, Price: {{price}}
    		<hr/>
    	{{/if}}
    {{/each}}
{{/tableSort}}