Last active
August 10, 2016 12:58
-
-
Save zarahzachz/47767bf035f2fe111ab0 to your computer and use it in GitHub Desktop.
Create extendable table for PatternLab using Mustache and JSON. Including 8-col table for demo purposes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"table-data" : { | |
"table-wrapper--modifier" : "", | |
"table--modifier" : "", | |
"there-is-a-footer" : true, | |
"one-col" : { | |
"label" : [ | |
{ | |
"header" : "Header 1", | |
"header--modifier" : "", | |
"footer" : "Footer 1", | |
"footer--modifier" : "" | |
} | |
], | |
"tbody" : [ | |
{ | |
"row--modifier" : "", | |
"row" : [ | |
{ | |
"cell" : "Ipsum A", | |
"cell--modifier" : "" | |
} | |
] | |
} | |
] | |
}, | |
"two-col" : { | |
"label" : [ | |
{ | |
"header" : "Header 1", | |
"header--modifier" : "", | |
"footer" : "Footer 1", | |
"footer--modifier" : "" | |
}, | |
{ | |
"header" : "Header 2", | |
"header--modifier" : "", | |
"footer" : "Footer 2", | |
"footer--modifier" : "" | |
} | |
], | |
"tbody" : [ | |
{ | |
"row--modifier" : "", | |
"row" : [ | |
{ | |
"cell" : "Ipsum A", | |
"cell--modifier" : "" | |
}, | |
{ | |
"cell" : "Ipsum B", | |
"cell--modifier" : "" | |
} | |
] | |
} | |
] | |
}, | |
"three-col" : { | |
"label" : [ | |
{ | |
"header" : "Header 1", | |
"header--modifier" : "", | |
"footer" : "Footer 1", | |
"footer--modifier" : "" | |
}, | |
{ | |
"header" : "Header 2", | |
"header--modifier" : "", | |
"footer" : "Footer 2", | |
"footer--modifier" : "" | |
}, | |
{ | |
"header" : "Header 3", | |
"header--modifier" : "", | |
"footer" : "Footer 3", | |
"footer--modifier" : "" | |
} | |
], | |
"tbody" : [ | |
{ | |
"row--modifier" : "", | |
"row" : [ | |
{ | |
"cell" : "Ipsum A", | |
"cell--modifier" : "" | |
}, | |
{ | |
"cell" : "Ipsum B", | |
"cell--modifier" : "" | |
}, | |
{ | |
"cell" : "Ipsum C", | |
"cell--modifier" : "" | |
} | |
] | |
} | |
] | |
}, | |
"four-col" : { | |
"label" : [ | |
{ | |
"header" : "Header 1", | |
"header--modifier" : "", | |
"footer" : "Footer 1", | |
"footer--modifier" : "" | |
}, | |
{ | |
"header" : "Header 2", | |
"header--modifier" : "", | |
"footer" : "Footer 2", | |
"footer--modifier" : "" | |
}, | |
{ | |
"header" : "Header 3", | |
"header--modifier" : "", | |
"footer" : "Footer 3", | |
"footer--modifier" : "" | |
}, | |
{ | |
"header" : "Header 4", | |
"header--modifier" : "", | |
"footer" : "Footer 4", | |
"footer--modifier" : "" | |
} | |
], | |
"tbody" : [ | |
{ | |
"row--modifier" : "", | |
"row" : [ | |
{ | |
"cell" : "Ipsum A", | |
"cell--modifier" : "" | |
}, | |
{ | |
"cell" : "Ipsum B", | |
"cell--modifier" : "" | |
}, | |
{ | |
"cell" : "Ipsum C", | |
"cell--modifier" : "" | |
}, | |
{ | |
"cell" : "Ipsum D", | |
"cell--modifier" : "" | |
} | |
] | |
} | |
] | |
}, | |
"five-col" : { | |
"label" : [ | |
{ | |
"header" : "Header 1", | |
"header--modifier" : "", | |
"footer" : "Footer 1", | |
"footer--modifier" : "" | |
}, | |
{ | |
"header" : "Header 2", | |
"header--modifier" : "", | |
"footer" : "Footer 2", | |
"footer--modifier" : "" | |
}, | |
{ | |
"header" : "Header 3", | |
"header--modifier" : "", | |
"footer" : "Footer 3", | |
"footer--modifier" : "" | |
}, | |
{ | |
"header" : "Header 4", | |
"header--modifier" : "", | |
"footer" : "Footer 4", | |
"footer--modifier" : "" | |
}, | |
{ | |
"header" : "Header 5", | |
"header--modifier" : "", | |
"footer" : "Footer 5", | |
"footer--modifier" : "" | |
} | |
], | |
"tbody" : [ | |
{ | |
"row--modifier" : "", | |
"row" : [ | |
{ | |
"cell" : "Ipsum A", | |
"cell--modifier" : "" | |
}, | |
{ | |
"cell" : "Ipsum B", | |
"cell--modifier" : "" | |
}, | |
{ | |
"cell" : "Ipsum C", | |
"cell--modifier" : "" | |
}, | |
{ | |
"cell" : "Ipsum D", | |
"cell--modifier" : "" | |
}, | |
{ | |
"cell" : "Ipsum E", | |
"cell--modifier" : "" | |
} | |
] | |
} | |
] | |
}, | |
"six-col" : { | |
"label" : [ | |
{ | |
"header" : "Header 1", | |
"header--modifier" : "", | |
"footer" : "Footer 1", | |
"footer--modifier" : "" | |
}, | |
{ | |
"header" : "Header 2", | |
"header--modifier" : "", | |
"footer" : "Footer 2", | |
"footer--modifier" : "" | |
}, | |
{ | |
"header" : "Header 3", | |
"header--modifier" : "", | |
"footer" : "Footer 3", | |
"footer--modifier" : "" | |
}, | |
{ | |
"header" : "Header 4", | |
"header--modifier" : "", | |
"footer" : "Footer 4", | |
"footer--modifier" : "" | |
}, | |
{ | |
"header" : "Header 5", | |
"header--modifier" : "", | |
"footer" : "Footer 5", | |
"footer--modifier" : "" | |
}, | |
{ | |
"header" : "Header 6", | |
"header--modifier" : "", | |
"footer" : "Footer 6", | |
"footer--modifier" : "" | |
} | |
], | |
"tbody" : [ | |
{ | |
"row--modifier" : "", | |
"row" : [ | |
{ | |
"cell" : "Ipsum A", | |
"cell--modifier" : "" | |
}, | |
{ | |
"cell" : "Ipsum B", | |
"cell--modifier" : "" | |
}, | |
{ | |
"cell" : "Ipsum C", | |
"cell--modifier" : "" | |
}, | |
{ | |
"cell" : "Ipsum D", | |
"cell--modifier" : "" | |
}, | |
{ | |
"cell" : "Ipsum E", | |
"cell--modifier" : "" | |
}, | |
{ | |
"cell" : "Ipsum F", | |
"cell--modifier" : "" | |
} | |
] | |
} | |
] | |
}, | |
"seven-col" : { | |
"label" : [ | |
{ | |
"header" : "Header 1", | |
"header--modifier" : "", | |
"footer" : "Footer 1", | |
"footer--modifier" : "" | |
}, | |
{ | |
"header" : "Header 2", | |
"header--modifier" : "", | |
"footer" : "Footer 2", | |
"footer--modifier" : "" | |
}, | |
{ | |
"header" : "Header 3", | |
"header--modifier" : "", | |
"footer" : "Footer 3", | |
"footer--modifier" : "" | |
}, | |
{ | |
"header" : "Header 4", | |
"header--modifier" : "", | |
"footer" : "Footer 4", | |
"footer--modifier" : "" | |
}, | |
{ | |
"header" : "Header 5", | |
"header--modifier" : "", | |
"footer" : "Footer 5", | |
"footer--modifier" : "" | |
}, | |
{ | |
"header" : "Header 6", | |
"header--modifier" : "", | |
"footer" : "Footer 6", | |
"footer--modifier" : "" | |
}, | |
{ | |
"header" : "Header 7", | |
"header--modifier" : "", | |
"footer" : "Footer 7", | |
"footer--modifier" : "" | |
} | |
], | |
"tbody" : [ | |
{ | |
"row--modifier" : "", | |
"row" : [ | |
{ | |
"cell" : "Ipsum A", | |
"cell--modifier" : "" | |
}, | |
{ | |
"cell" : "Ipsum B", | |
"cell--modifier" : "" | |
}, | |
{ | |
"cell" : "Ipsum C", | |
"cell--modifier" : "" | |
}, | |
{ | |
"cell" : "Ipsum D", | |
"cell--modifier" : "" | |
}, | |
{ | |
"cell" : "Ipsum E", | |
"cell--modifier" : "" | |
}, | |
{ | |
"cell" : "Ipsum F", | |
"cell--modifier" : "" | |
}, | |
{ | |
"cell" : "Ipsum G", | |
"cell--modifier" : "" | |
} | |
] | |
} | |
] | |
}, | |
"eight-col" : { | |
"label" : [ | |
{ | |
"header" : "Header 1", | |
"header--modifier" : "", | |
"footer" : "Footer 1", | |
"footer--modifier" : "" | |
}, | |
{ | |
"header" : "Header 2", | |
"header--modifier" : "", | |
"footer" : "Footer 2", | |
"footer--modifier" : "" | |
}, | |
{ | |
"header" : "Header 3", | |
"header--modifier" : "", | |
"footer" : "Footer 3", | |
"footer--modifier" : "" | |
}, | |
{ | |
"header" : "Header 4", | |
"header--modifier" : "", | |
"footer" : "Footer 4", | |
"footer--modifier" : "" | |
}, | |
{ | |
"header" : "Header 5", | |
"header--modifier" : "", | |
"footer" : "Footer 5", | |
"footer--modifier" : "" | |
}, | |
{ | |
"header" : "Header 6", | |
"header--modifier" : "", | |
"footer" : "Footer 6", | |
"footer--modifier" : "" | |
}, | |
{ | |
"header" : "Header 7", | |
"header--modifier" : "", | |
"footer" : "Footer 7", | |
"footer--modifier" : "" | |
}, | |
{ | |
"header" : "Header 8", | |
"header--modifier" : "", | |
"footer" : "Footer 8", | |
"footer--modifier" : "" | |
} | |
], | |
"tbody" : [ | |
{ | |
"row--modifier" : "", | |
"row" : [ | |
{ | |
"cell" : "Ipsum A", | |
"cell--modifier" : "" | |
}, | |
{ | |
"cell" : "Ipsum B", | |
"cell--modifier" : "" | |
}, | |
{ | |
"cell" : "Ipsum C", | |
"cell--modifier" : "" | |
}, | |
{ | |
"cell" : "Ipsum D", | |
"cell--modifier" : "" | |
}, | |
{ | |
"cell" : "Ipsum E", | |
"cell--modifier" : "" | |
}, | |
{ | |
"cell" : "Ipsum F", | |
"cell--modifier" : "" | |
}, | |
{ | |
"cell" : "Ipsum G", | |
"cell--modifier" : "" | |
}, | |
{ | |
"cell" : "Ipsum H", | |
"cell--modifier" : "" | |
} | |
] | |
} | |
] | |
} | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="{{table-wrapper--modifier}}"> | |
<table class="{{table--modifier}}"> | |
<thead> | |
<tr> | |
{{# table-data.eight-col.label}} | |
<th class="{{header--modifier}}">{{header}}</th> | |
{{/ table-data.eight-col.label}} | |
</tr> | |
</thead> | |
{{# table-data.there-is-a-footer}} | |
<tfoot> | |
<tr> | |
{{# table-data.eight-col.label}} | |
<td class="{{footer--modifier}}">{{footer}}</td> | |
{{/ table-data.eight-col.label}} | |
</tr> | |
</tfoot> | |
{{/ table-data.there-is-a-footer}} | |
<tbody> | |
{{# table-data.eight-col.tbody}} | |
<tr class="{{row--modifier}}"> | |
{{# row}} | |
<td class="{{cell--modifier}}">{{{cell}}}</td> | |
{{/ row}} | |
</tr> | |
{{/ table-data.eight-col.tbody}} | |
</tbody> | |
</table> | |
</div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment