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 +rows.[].attributes + +object + +No + +Any extra HTML attributes (for example data attributes) to add to the cell. + + + + + head array @@ -502,6 +514,18 @@ If you are using Nunjucks,then macros take the following arguments +head.[].attributes + +object + +No + +Any extra HTML attributes (for example data attributes) to add to the cell. + + + + + caption 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') + }) })