Skip to content

Instantly share code, notes, and snippets.

@zarahzachz

zarahzachz/_table-data.json

Last active August 10, 2016 12:58
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save zarahzachz/47767bf035f2fe111ab0 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save zarahzachz/47767bf035f2fe111ab0 to your computer and use it in GitHub Desktop.
Download ZIP
Create extendable table for PatternLab using Mustache and JSON. Including 8-col table for demo purposes.
Raw
_table-data.json
{
"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" : ""
}
]
}
]
}
}
}
Raw
eight-col-table.mustache
<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