Add support for attributes on table cells

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)

src/components/table/README.md

@@ -442,6 +442,18 @@ If you are using Nunjucks,then macros take the following arguments
 
 <tr class="govuk-table__row">
 
+<th class="govuk-table__header" scope="row">rows.[].attributes</th>
+
+<td class="govuk-table__cell">object</td>
+
+<td class="govuk-table__cell">No</td>
+
+<td class="govuk-table__cell">Any extra HTML attributes (for example data attributes) to add to the cell.</td>
+
+</tr>
+
+<tr class="govuk-table__row">
+
 <th class="govuk-table__header" scope="row">head</th>
 
 <td class="govuk-table__cell">array</td>
@@ -502,6 +514,18 @@ If you are using Nunjucks,then macros take the following arguments
 
 <tr class="govuk-table__row">
 
+<th class="govuk-table__header" scope="row">head.[].attributes</th>
+
+<td class="govuk-table__cell">object</td>
+
+<td class="govuk-table__cell">No</td>
+
+<td class="govuk-table__cell">Any extra HTML attributes (for example data attributes) to add to the cell.</td>
+
+</tr>
+
+<tr class="govuk-table__row">
+
 <th class="govuk-table__header" scope="row">caption</th>
 
 <td class="govuk-table__cell">string</td>

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'

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

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 }}</th>
+      {%- 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 }}</th>
     {% endfor %}
     </tr>
   </thead>
@@ -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 }}</td>
+      {%- 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 }}</td>
       {% else %}
       <td class="govuk-table__cell 
       {%- 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 }}</td>
+      {%- 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 }}</td>
       {% endif %}
     {% endfor %}
     </tr>

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')
+  })
 })