Skip to content

Commit 13d1d79

Browse files
colinrotherhamcolinrotherham
authored
Merge pull request #1172 from nhsuk/table-classes
Add table cell `classes` and `attributes` param support
2 parents bd7d4ec + 8d75b38 commit 13d1d79

12 files changed

+79
-51
lines changed

‎CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
:new: **New features**
66

77
- Output source maps and use minified code in examples ([PR 1152](https://github.com/nhsuk/nhsuk-frontend/pull/1152))
8+
- Add table cell `classes` and `attributes` param support [PR 1172](https://github.com/nhsuk/nhsuk-frontend/pull/1172)
89

910
:wrench: **Fixes**
1011

‎app/components/all.njk‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -553,8 +553,8 @@
553553
<table class="nhsuk-table">
554554
<thead class="nhsuk-table__head">
555555
<tr class="nhsuk-table__row">
556-
<th class="nhsuk-table__header" scope="col">Class name</th>
557-
<th class="nhsuk-table__header" scope="col" style="width: 120px">Tag</th>
556+
<th scope="col" class="nhsuk-table__header nhsuk-u-width-two-thirds">Class name</th>
557+
<th scope="col" class="nhsuk-table__header nhsuk-u-width-one-third">Tag</th>
558558
</tr>
559559
</thead>
560560
<tbody class="nhsuk-table__body">

‎app/components/tables/responsive-table.njk‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,13 +17,16 @@
1717
firstCellIsHeader: false,
1818
head: [
1919
{
20-
text: "Age"
20+
text: "Age",
21+
classes: "nhsuk-u-width-one-half"
2122
},
2223
{
23-
text: "How much?"
24+
text: "How much?",
25+
classes: "nhsuk-u-width-one-quarter"
2426
},
2527
{
26-
text: "How often?"
28+
text: "How often?",
29+
classes: "nhsuk-u-width-one-quarter"
2730
}
2831
],
2932
rows: [

‎app/components/tag/index.njk‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@
1414
<table class="nhsuk-table">
1515
<thead class="nhsuk-table__head">
1616
<tr class="nhsuk-table__row">
17-
<th class="nhsuk-table__header" scope="col">Class name</th>
18-
<th class="nhsuk-table__header" scope="col" style="width: 120px">Tag</th>
17+
<th scope="col" class="nhsuk-table__header nhsuk-u-width-two-thirds">Class name</th>
18+
<th scope="col" class="nhsuk-table__header nhsuk-u-width-one-third">Tag</th>
1919
</tr>
2020
</thead>
2121
<tbody class="nhsuk-table__body">

‎packages/components/tables/README.md‎

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,8 @@ Find out more about the table component and when to use it in the [NHS digital s
1818
<caption class="nhsuk-table__caption">Skin symptoms and possible causes</caption>
1919
<thead class="nhsuk-table__head">
2020
<tr class="nhsuk-table__row">
21-
<th class="nhsuk-table__header" scope="col">Skin symptoms</th>
22-
<th class="nhsuk-table__header" scope="col">Possible cause</th>
21+
<th scope="col" class="nhsuk-table__header">Skin symptoms</th>
22+
<th scope="col" class="nhsuk-table__header">Possible cause</th>
2323
</tr>
2424
</thead>
2525
<tbody class="nhsuk-table__body">
@@ -185,21 +185,21 @@ Find out more about the table component and when to use it in the [NHS digital s
185185
<caption class="nhsuk-table__caption">Ibuprofen syrup dosages for children</caption>
186186
<thead role="rowgroup" class="nhsuk-table__head">
187187
<tr role="row">
188-
<th role="columnheader" class="" scope="col">
188+
<th scope="col" role="columnheader" class="nhsuk-table__header">
189189
Age
190190
</th>
191-
<th role="columnheader" class="" scope="col">
191+
<th scope="col" role="columnheader" class="nhsuk-table__header">
192192
How much?
193193
</th>
194-
<th role="columnheader" class="" scope="col">
194+
<th scope="col" role="columnheader" class="nhsuk-table__header">
195195
How often?
196196
</th>
197197
</tr>
198198
</thead>
199199
<tbody class="nhsuk-table__body">
200200
<tr role="row" class="nhsuk-table__row" >
201201
<td role="cell" class="nhsuk-table__cell">
202-
<span class="nhsuk-table-responsive__heading aria-hidden="true"">Age </span>3 to 5 months (weighing more than 5kg)
202+
<span class="nhsuk-table-responsive__heading aria-hidden="true">Age </span>3 to 5 months (weighing more than 5kg)
203203
</td>
204204
<td role="cell" class="nhsuk-table__cell">
205205
<span class="nhsuk-table-responsive__heading" aria-hidden="true">How much? </span>2.5ml
@@ -262,7 +262,8 @@ Find out more about the table component and when to use it in the [NHS digital s
262262
},
263263
{
264264
header: "How much?",
265-
text: "2.5ml"
265+
text: "2.5ml",
266+
classes: "nhsuk-u-width-one-quarter"
266267
},
267268
{
268269
header: "How often?",
@@ -312,8 +313,10 @@ The table Nunjucks macro takes the following arguments:
312313
| **rows** | array | Yes | Array of table rows and cells. |
313314
| **rows.[].text (or) rows.[].html** | string | Yes | Text or HTML for cells in table rows. If `html` is specified, the `text` argument will be ignored. |
314315
| **rows.[].format** | string | No | Specify format of a cell. Currently we only use "numeric". |
316+
| **rows.[].classes** | string | No | Classes to add to the table row cell. |
315317
| **rows.[].colspan** | number | No | Specify how many columns a cell extends. |
316318
| **rows.[].rowspan** | number | No | Specify how many rows a cell extends. |
319+
| **rows.[].attributes** | object | No | HTML attributes (for example data attributes) to add to the table cell. |
317320
| **panel** | boolean | No | If set to true, the table is rendered inside a [panel with a label](https://nhsuk.github.io/nhsuk-frontend/components/panel-with-label.html). |
318321
| **panelClasses** | string | No | Optional additional classes to add to the panel containing the table. Separate each class with a space. |
319322
| **heading** | string | No | Heading/label of the panel if the panel argument is set to true. |
@@ -324,9 +327,11 @@ The table Nunjucks macro takes the following arguments:
324327
| **captionClasses** | string | No | Optional additional classes to add to the table caption, for example `nhsuk-table__caption--l`. Separate each class with a space. |
325328
| **head** | array | No | Optional array of table head cells. |
326329
| **head.[].text or head.[].html** | array | No | Optional array of table head cells. If `html` is specified, the `text` argument will be ignored. |
330+
| **head.[].format** | string | No | Specify format of a cell. Currently we only use "numeric". |
331+
| **head.[].classes** | string | No | Classes to add to the table head cell. |
327332
| **head.[].colspan** | number | No | Specify how many columns a cell extends. |
328333
| **head.[].rowspan** | number | No | Specify how many rows a cell extends. |
329-
| **head.[].format** | string | No | Specify format of a cell. Currently we only use "numeric". |
334+
| **head.[].attributes** | object | No | HTML attributes (for example data attributes) to add to the table cell. |
330335
| **firstCellIsHeader** | boolean | No | If set to true, first cell in table row will be a TH instead of a TD. |
331336
| **responsive** | boolean | No | If set to true, responsive table classes will be applied. |
332337

‎packages/components/tables/template.njk‎

Lines changed: 54 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -8,50 +8,69 @@
88
<h{{ headingLevel }} class="nhsuk-table__heading-tab">{{ params.heading | safe }}</h{{ headingLevel }}>
99
{%- endif %}
1010
{%- endif %}
11-
<table {%- if params.responsive %} role="table"{% endif %} class="nhsuk-table{%- if params.responsive %}-responsive{% endif %}
12-
{%- if params.tableClasses %} {{ params.tableClasses }}{% endif %}"
13-
{{- nhsukAttributes(params.attributes) }}>
11+
<table class="nhsuk-table
12+
{%- if params.responsive %}-responsive{% endif %}
13+
{%- if params.tableClasses %} {{ params.tableClasses }}{% endif %}"
14+
{%- if params.responsive %} role="table"{% endif %}
15+
{{- nhsukAttributes(params.attributes) }}>
16+
1417
{%- if params.caption %}
1518
<caption class="nhsuk-table__caption
16-
{%- if params.captionClasses %} {{ params.captionClasses }}{% endif %}">{{ params.caption }}</caption>
19+
{%- if params.captionClasses %} {{ params.captionClasses }}{% endif %}">
20+
{{- params.caption -}}
21+
</caption>
1722
{%- endif %}
23+
1824
{%- if params.head %}
19-
<thead role="rowgroup" class="nhsuk-table__head">
20-
<tr role="row">
21-
{%- for item in params.head %}
22-
<th role="columnheader" class="
23-
{%- if item.format %} nhsuk-table__header--{{ item.format }}{% endif %}" scope="col">
24-
{{ item.html |safe if item.html else item.text }}
25-
</th>
26-
{%- endfor %}
27-
</tr>
25+
<thead class="nhsuk-table__head" {%- if params.responsive %} role="rowgroup"{% endif %}>
26+
<tr {%- if params.responsive %} role="row"{% endif %}>
27+
{%- for item in params.head %}
28+
<th scope="col" class="nhsuk-table__header
29+
{%- if item.format %} nhsuk-table__header--{{ item.format }}{% endif %}
30+
{%- if item.classes %} {{ item.classes }}{% endif %}"
31+
{%- if item.colspan %} colspan="{{ item.colspan }}"{% endif %}
32+
{%- if item.rowspan %} rowspan="{{ item.rowspan }}"{% endif %}
33+
{%- if params.responsive %} role="columnheader"{% endif %}
34+
{{- nhsukAttributes(item.attributes) }}>
35+
{{- item.html | safe if item.html else item.text -}}
36+
</th>
37+
{%- endfor %}
38+
</tr>
2839
</thead>
2940
{%- endif %}
3041
<tbody class="nhsuk-table__body">
3142
{%- for row in params.rows %}
32-
<tr role="row" class="nhsuk-table__row" >
33-
{%- if params.responsive %}
34-
{%- for cell in row %}
35-
<td role="cell" class="nhsuk-table__cell{% if cell.format %} nhsuk-table__cell--{{ cell.format }}{% endif %}">
36-
<span class="nhsuk-table-responsive__heading" aria-hidden="true">{{cell.header}} </span>{{ cell.html | safe if cell.html else cell.text }}
43+
<tr class="nhsuk-table__row" {%- if params.responsive %} role="row"{% endif %}>
44+
{%- for cell in row %}
45+
{% set commonAttributes %}
46+
{%- if cell.colspan %} colspan="{{ cell.colspan }}"{% endif %}
47+
{%- if cell.rowspan %} rowspan="{{ cell.rowspan }}"{% endif %}
48+
{{- nhsukAttributes(cell.attributes) -}}
49+
{% endset -%}
50+
51+
{% set commonContents %}
52+
{%- if params.responsive -%}
53+
<span class="nhsuk-table-responsive__heading" aria-hidden="true">{{ cell.header }} </span>
54+
{%- endif -%}
55+
{{- cell.html | safe if cell.html else cell.text -}}
56+
{% endset -%}
57+
58+
{%- if loop.first and params.firstCellIsHeader and not params.responsive %}
59+
<th scope="row" class="nhsuk-table__header
60+
{%- if cell.classes %} {{ cell.classes }}{% endif %}"
61+
{{- commonAttributes | safe }}>
62+
{{- commonContents | safe -}}
63+
</th>
64+
{%- else %}
65+
<td class="nhsuk-table__cell
66+
{%- if cell.format %} nhsuk-table__cell--{{ cell.format }}{% endif %}
67+
{%- if cell.classes %} {{ cell.classes }}{% endif %}"
68+
{%- if params.responsive %} role="cell"{% endif %}
69+
{{- commonAttributes | safe }}>
70+
{{- commonContents | safe -}}
3771
</td>
38-
{%- endfor %}
39-
{%- else %}
40-
{%- for cell in row %}
41-
{%- if loop.first and params.firstCellIsHeader %}
42-
<th class="nhsuk-table__header" scope="row">{{ cell.html | safe if cell.html else cell.text }}</th>
43-
{%- elseif loop.first %}
44-
<td class="nhsuk-table__cell
45-
{%- if cell.format %} nhsuk-table__cell--{{ cell.format }}{% endif %}"
46-
{%- if cell.colspan %} colspan="{{ cell.colspan }}"{% endif %}
47-
{%- if cell.rowspan %} rowspan="{{ cell.rowspan }}"{% endif %}>{{ cell.html | safe if cell.html else cell.text }}</td>
48-
{%- else %}
49-
<td class="nhsuk-table__cell {% if cell.format %}nhsuk-table__cell--{{ cell.format }}{% endif %}"
50-
{%- if cell.colspan %} colspan="{{ cell.colspan }}"{% endif %}
51-
{%- if cell.rowspan %} rowspan="{{ cell.rowspan }}"{% endif %}>{{ cell.html | safe if cell.html else cell.text }}</td>
52-
{%- endif %}
53-
{%- endfor %}
54-
{%- endif %}
72+
{%- endif %}
73+
{%- endfor %}
5574
</tr>
5675
{%- endfor %}
5776
</tbody>

‎tasks/docs.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -137,7 +137,7 @@ gulp.task(
137137

138138
gulp.task('docs:watch', () =>
139139
Promise.all([
140-
gulp.watch(['app/**/*.njk'], buildHTML),
140+
gulp.watch(['**/*.njk'], buildHTML),
141141
gulp.watch(['dist/**/*.html']).on('change', browserSync.reload),
142142
gulp.watch(['dist/*.min.{css,css.map}'], copyCSS),
143143
gulp.watch(['dist/*.min.{js,js.map}'], copyJS),

‎tests/backstop/bitmaps_reference/nhsuk-frontend_Responsive_table_0_document_3_Surface_iPad_Pro.png‎

-5.72 KB
Loading

‎tests/backstop/bitmaps_reference/nhsuk-frontend_Tag_0_document_0_iPhone_5_SE.png‎

-5.19 KB
Loading

‎tests/backstop/bitmaps_reference/nhsuk-frontend_Tag_0_document_1_iPhone_6-8.png‎

-3.8 KB
Loading

0 commit comments

Comments
 (0)