diff --git a/CHANGELOG.md b/CHANGELOG.md
index f87bfdd24b..2366dd9592 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -20,6 +20,13 @@
([PR #1037](https://github.com/alphagov/govuk-frontend/pull/1037))
+- Add support for attributes on table cells
+
+ Can now use the familiar `attrubutes: {}` pattern to add various
+ attributes such as `id` or `data-attr` to cells within tables
+
+ ([PR #1045](https://github.com/alphagov/govuk-frontend/pull/1045))
+
- Pull Request Title goes here
Description goes here (optional)
diff --git a/src/components/table/README.md b/src/components/table/README.md
index fbf204ea17..36726aa949 100644
--- a/src/components/table/README.md
+++ b/src/components/table/README.md
@@ -442,6 +442,18 @@ If you are using Nunjucks,then macros take the following arguments
+
+
+object |
+
+No |
+
+Any extra HTML attributes (for example data attributes) to add to the cell. |
+
+
+
+
+
array |
@@ -502,6 +514,18 @@ If you are using Nunjucks,then macros take the following arguments
+
+
+object |
+
+No |
+
+Any extra HTML attributes (for example data attributes) to add to the cell. |
+
+
+
+
+
string |
diff --git a/src/components/table/README.njk b/src/components/table/README.njk
index 5af86d4eed..d3a2def0f7 100644
--- a/src/components/table/README.njk
+++ b/src/components/table/README.njk
@@ -101,6 +101,20 @@
text: 'Specify how many rows a cell extends.'
}
],
+ [
+ {
+ text: 'rows.[].attributes'
+ },
+ {
+ text: 'object'
+ },
+ {
+ text: 'No'
+ },
+ {
+ text: 'Any extra HTML attributes (for example data attributes) to add to the cell.'
+ }
+ ],
[
{
text: 'head'
@@ -171,6 +185,20 @@
text: 'Specify format of a cell. Currently we only use "numeric".'
}
],
+ [
+ {
+ text: 'head.[].attributes'
+ },
+ {
+ text: 'object'
+ },
+ {
+ text: 'No'
+ },
+ {
+ text: 'Any extra HTML attributes (for example data attributes) to add to the cell.'
+ }
+ ],
[
{
text: 'caption'
diff --git a/src/components/table/table.yaml b/src/components/table/table.yaml
index 4641c02230..9b9524de83 100644
--- a/src/components/table/table.yaml
+++ b/src/components/table/table.yaml
@@ -28,6 +28,10 @@ params:
type: integer
required: false
description: Specify how many rows a cell extends.
+ - name: attributes
+ type: object
+ required: false
+ description: HTML attributes (for example data attributes) to add to the table cell.
- name: head
type: array
required: false
@@ -57,6 +61,10 @@ params:
type: integer
required: false
description: Specify how many rows a cell extends.
+ - name: attributes
+ type: object
+ required: false
+ description: HTML attributes (for example data attributes) to add to the table cell.
- name: caption
type: string
required: false
diff --git a/src/components/table/template.njk b/src/components/table/template.njk
index 727c49cdb0..cf16cc0611 100644
--- a/src/components/table/template.njk
+++ b/src/components/table/template.njk
@@ -12,7 +12,7 @@
{%- if item.format %} govuk-table__header--{{ item.format }}{% endif %}
{%- if item.classes %} {{ item.classes }}{% endif %}"
{%- if item.colspan %} colspan="{{ item.colspan }}"{% endif %}
- {%- if item.rowspan %} rowspan="{{ item.rowspan }}"{% endif %} scope="col">{{ item.html |safe if item.html else item.text }}
+ {%- if item.rowspan %} rowspan="{{ item.rowspan }}"{% endif %}{% for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor %} scope="col">{{ item.html |safe if item.html else item.text }}
{% endfor %}
@@ -28,13 +28,13 @@
{%- if cell.format %} govuk-table__cell--{{ cell.format }}{% endif %}
{%- if cell.classes %} {{ cell.classes }}{% endif %}"
{%- if cell.colspan %} colspan="{{ cell.colspan }}"{% endif %}
- {%- if cell.rowspan %} rowspan="{{ cell.rowspan }}"{% endif %}>{{ cell.html | safe if cell.html else cell.text }}
+ {%- if cell.rowspan %} rowspan="{{ cell.rowspan }}"{% endif %}{% for attribute, value in cell.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>{{ cell.html | safe if cell.html else cell.text }}
{% else %}
{{ cell.html | safe if cell.html else cell.text }} |
+ {%- if cell.rowspan %} rowspan="{{ cell.rowspan }}"{% endif %}{% for attribute, value in cell.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>{{ cell.html | safe if cell.html else cell.text }}
{% endif %}
{% endfor %}
diff --git a/src/components/table/template.test.js b/src/components/table/template.test.js
index e49b820c00..96378e7f5e 100644
--- a/src/components/table/template.test.js
+++ b/src/components/table/template.test.js
@@ -418,4 +418,96 @@ describe('Table', () => {
expect($component.attr('attribute-1')).toEqual('yes')
expect($component.attr('attribute-2')).toEqual('no')
})
+
+ it('renders with attributes on a head cell ', () => {
+ const $ = render('table', {
+ 'head': [
+ {
+ 'text': 'Month you apply',
+ 'attributes': {
+ 'id': 'some-unique-id'
+ }
+ },
+ {
+ 'text': 'Rate for bicycles',
+ 'format': 'numeric'
+ },
+ {
+ 'text': 'Rate for vehicles',
+ 'format': 'numeric'
+ }
+ ],
+ 'rows': [
+ [
+ {
+ 'text': 'January'
+ },
+ {
+ 'text': '£85',
+ 'format': 'numeric'
+ }
+ ],
+ [
+ {
+ 'text': 'February'
+ },
+ {
+ 'text': '£165',
+ 'format': 'numeric'
+ }
+ ]
+ ]
+ })
+
+ const $component = $('.govuk-table')
+ const $tableHeadCell = $component.find('.govuk-table__head .govuk-table__header')
+
+ expect($tableHeadCell.eq(0).attr('id')).toMatch('some-unique-id')
+ })
+
+ it('renders with attributes on a body cell ', () => {
+ const $ = render('table', {
+ 'head': [
+ {
+ 'text': 'Month you apply'
+ },
+ {
+ 'text': 'Rate for bicycles',
+ 'format': 'numeric'
+ },
+ {
+ 'text': 'Rate for vehicles',
+ 'format': 'numeric'
+ }
+ ],
+ 'rows': [
+ [
+ {
+ 'text': 'January',
+ 'attributes': {
+ 'id': 'some-unique-id'
+ }
+ },
+ {
+ 'text': '£85',
+ 'format': 'numeric'
+ }
+ ],
+ [
+ {
+ 'text': 'February'
+ },
+ {
+ 'text': '£165',
+ 'format': 'numeric'
+ }
+ ]
+ ]
+ })
+
+ const $component = $('.govuk-table')
+ const $tableBodyCell = $component.find('.govuk-table__body .govuk-table__cell')
+
+ expect($tableBodyCell.eq(0).attr('id')).toMatch('some-unique-id')
+ })
})