Last active
September 8, 2017 08:01
-
-
Save adamsilver/eedfd7a418534bc5fa41c5b899d172de to your computer and use it in GitHub Desktop.
Table Macros For Nunjucks (requires CSS for inner components and sortable table JS for behaviour)
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
| {{tables.table({ | |
| rows: [{ | |
| cells: [{ | |
| html: 'Select', | |
| width: '8%' | |
| },{ | |
| html: 'Start time', | |
| width: '12%' | |
| },{ | |
| html: 'End time', | |
| width: '12%' | |
| },{ | |
| html: 'Appointment', | |
| width: '22%' | |
| },{ | |
| html: 'Notes', | |
| width: '24%' | |
| },{ | |
| html: 'Status', | |
| width: '13%' | |
| }] | |
| }] | |
| }, { | |
| rows: [{ | |
| cells: [{ | |
| }, { | |
| html: '9am' | |
| },{ | |
| html: '9:30am' | |
| },{ | |
| html: 'Preview time' | |
| },{ | |
| }, { | |
| }] | |
| }, { | |
| cells: [{ | |
| html: '<input type="checkbox">' | |
| }, { | |
| html: '9:30am' | |
| },{ | |
| html: '10am' | |
| },{ | |
| html: '<a href="">Work search review with Alex Smith</a> ' | |
| },{ | |
| html: '<span class="cell-highlight cell-highlight--black">Special requirements</span>' | |
| }, { | |
| html: '<span class="cell-highlight cell-highlight--blue">Attend</span>' | |
| }] | |
| }, { | |
| cells: [{ | |
| html: '<input type="checkbox">' | |
| }, { | |
| html: '10am' | |
| },{ | |
| html: '10:30am' | |
| },{ | |
| html: '<a href="#">Standard ID with John Smith</a>' | |
| },{ | |
| html: 'Phone' | |
| }, { | |
| html: '<span class="cell-highlight cell-highlight--red">Failed to attend</span>' | |
| }] | |
| },{ | |
| cells: [{ | |
| html: '<input type="checkbox">' | |
| }, { | |
| html: '10:30am' | |
| },{ | |
| html: '11:30am' | |
| },{ | |
| html: '<a href="#">Habitual residency test with Victoria Jenns</a>' | |
| },{ | |
| html: '' | |
| }, { | |
| html: '' | |
| }] | |
| }, { | |
| cells: [{ | |
| }, { | |
| html: '11:30am' | |
| },{ | |
| html: '12:30pm' | |
| },{ | |
| html: 'Available' | |
| },{ | |
| }, { | |
| }] | |
| }, { | |
| cells: [{ | |
| }, { | |
| html: '12:30pm' | |
| },{ | |
| html: '1:30pm' | |
| },{ | |
| html: 'Lunch' | |
| },{ | |
| }, { | |
| }] | |
| }, { | |
| cells: [{ | |
| html: '<input type="checkbox">' | |
| }, { | |
| html: '1pm' | |
| },{ | |
| html: '1:15pm' | |
| },{ | |
| html: '<a href="#">Work search review with Jennifer Jones</a>' | |
| },{ | |
| html: '' | |
| }, { | |
| html: '' | |
| }] | |
| }, { | |
| cells: [{ | |
| html: '<input type="checkbox">' | |
| }, { | |
| html: '1:15pm' | |
| },{ | |
| html: '1:30pm' | |
| },{ | |
| html: '<a href="#">Further evidence with David Simmons</a>' | |
| },{ | |
| html: '' | |
| }, { | |
| html: '' | |
| }] | |
| }, { | |
| cells: [{ | |
| }, { | |
| html: '1:30pm' | |
| },{ | |
| html: '2:30pm' | |
| },{ | |
| html: '<a href="">Team meeting</a>' | |
| },{ | |
| html: '' | |
| }, { | |
| html: '' | |
| }] | |
| },{ | |
| cells: [{ | |
| }, { | |
| html: '2:30pm' | |
| },{ | |
| html: '2:45pm' | |
| },{ | |
| html: '<a href="">Break</a>' | |
| },{ | |
| html: '' | |
| }, { | |
| html: '' | |
| }] | |
| }, { | |
| cells: [{ | |
| html: '<input type="checkbox">' | |
| }, { | |
| html: '2:45pm' | |
| },{ | |
| html: '3:15pm' | |
| },{ | |
| html: '<a href="">Further evidence with John Willis</a>' | |
| },{ | |
| html: '' | |
| }, { | |
| html: '' | |
| }] | |
| }, { | |
| cells: [{ | |
| }, { | |
| html: '3:15pm' | |
| },{ | |
| html: '4:50pm' | |
| },{ | |
| html: 'Available' | |
| },{ | |
| html: '' | |
| }, { | |
| html: '' | |
| }] | |
| }] | |
| })}} |
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
| {{tables.table(null, { | |
| rows: [{ cells: [{ width: '25%', type: 'th', html: 'Jobcentre' }, { html: 'Sutton' }] }, | |
| { cells: [{ type: 'th', html: 'Work coach' }, { html: 'Jasmine Brindley' }] }, | |
| { cells: [{ type: 'th', html: 'Case manager' }, { html: 'You ' }] }, | |
| { cells: [{ type: 'th', html: 'Claim status' }, { html: 'Active claim' }] }, | |
| { cells: [{ type: 'th', html: 'Declared on' }, { html: '14/09/2016' }] }, | |
| { cells: [{ type: 'th', html: 'Claim start' }, { html: '14/09/2016' }] }, | |
| { cells: [{ type: 'th', html: 'Entitled from' }, { html: '21/09/2016' }] }, | |
| { cells: [{ type: 'th', html: 'Work group' }, { html: 'Intensive work search' }] }, | |
| { cells: [{ type: 'th', html: 'Assessment period end date' }, { html: '20/10/2016' }] }, | |
| { cells: [{ type: 'th', html: 'Payment day of month' }, { html: '27th ' }] }, | |
| { cells: [{ type: 'th', html: 'Contract ID' }, { html: 'c1c76bf1-ffa6-4155-95bb-0cd2138e5666' }] }, | |
| { cells: [{ type: 'th', html: 'Date of birth' }, { html: '29/01/1971 – 45 years' }] }, | |
| { cells: [{ type: 'th', html: 'Postcode' }, { html: 'SM5 2RT' }] }, | |
| { cells: [{ type: 'th', html: 'Email' }, { html: 'laflasdfj@example.com ' }] }, | |
| { cells: [{ type: 'th', html: 'Preferred contact method' }, { html: 'Email' }] }, | |
| { cells: [{ type: 'th', html: 'Next appointment' }, { html: 'No appointment scheduled' }] }] | |
| } | |
| )}} |
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
| {{tables.table({ | |
| rows: [{ | |
| cells: [ | |
| { width: '30%', sort: 'ascending', classes: 'blah', html: 'Claimant' }, | |
| { width: '15%', sort: 'none', classes: 'blah', html: 'Date' }, | |
| { width: '25%', sort: 'none', classes: 'blah', html: 'Something' }, | |
| { width: '15%', sort: 'none', classes: 'blah', html: 'Number', classes: 'table-number' } | |
| ] | |
| } | |
| ]}, { | |
| rows: [{ | |
| cells: [ | |
| { html: '<a href="">Alex Smith</a>', sortValue: '0' }, | |
| { html: '12 Jan 2017', sortValue: '1' }, | |
| { html: '2', sortValue: '2' }, | |
| { html: '9', classes: 'table-number', sortValue: '2' } | |
| ] | |
| }, { | |
| cells: [ | |
| { html: '<a href="">Bruce Wayne</a>', sortValue: '2' }, | |
| { html: '30 Jun 2017', sortValue: '3' }, | |
| { html: '1', sortValue: '1' }, | |
| { html: '10', classes: 'table-number', sortValue: '3' } | |
| ] | |
| }, { | |
| cells: [ | |
| { html: '<a href="">Oliver Queen</a>', sortValue: '3' }, | |
| { html: '1 Feb 2017', sortValue: '2' }, | |
| { html: '3', sortValue: '3' }, | |
| { html: '8', classes: 'table-number', sortValue: '1' } | |
| ] | |
| }] | |
| } | |
| )}} |
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
| {% macro table(thead, tbody, tfoot) %} | |
| <table> | |
| {% if thead %} | |
| <thead> | |
| {% for row in thead.rows %} | |
| <tr> | |
| {% for cell in row.cells %} | |
| <th | |
| {% if cell.width %} | |
| width="{{cell.width}}" | |
| {% endif %} | |
| {% if cell.sort %} | |
| aria-sort="{{cell.sort}}" | |
| {% endif %} | |
| {% if cell.classes %} | |
| class="{{cell.classes}}" | |
| {% endif %} | |
| > | |
| {{cell.html | safe}} | |
| </th> | |
| {% endfor %} | |
| </tr> | |
| {% endfor %} | |
| </thead> | |
| {% endif %} | |
| <tbody> | |
| {% for row in tbody.rows %} | |
| <tr> | |
| {% for cell in row.cells %} | |
| <{% if cell.type == 'th' %}{{cell.type}}{% else %}td{% endif %} | |
| {% if cell.width %} | |
| width="{{cell.width}}" | |
| {% endif %} | |
| {% if cell.sortValue %} | |
| data-sort-value="{{cell.sortValue}}" | |
| {% endif %} | |
| {% if cell.classes %} | |
| class="{{cell.classes}}" | |
| {% endif %} | |
| > | |
| {{cell.html | safe}} | |
| </{% if cell.type == 'th' %}{{cell.type}}{% else %}td{% endif %} > | |
| {% endfor %} | |
| </tr> | |
| {% endfor %} | |
| </tbody> | |
| {% if tfoot %} | |
| <tfoot style="border-top: 2px solid #000"> | |
| {% for row in tfoot.rows %} | |
| <tr> | |
| {% for cell in row.cells %} | |
| <{% if cell.type == 'th' %}{{cell.type}}{% else %}td{% endif %} | |
| {% if cell.classes %} | |
| class="{{cell.classes}}" | |
| {% endif %} | |
| > | |
| {{cell.html | safe}} | |
| </{% if cell.type == 'th' %}{{cell.type}}{% else %}td{% endif %} > | |
| {% endfor %} | |
| </tr> | |
| {% endfor %} | |
| </tfoot> | |
| {% endif %} | |
| </table> | |
| {% endmacro %} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment