[Feature]: Request for colgroup in the table component

[mwirikia]

What feature would you like to add to the ONS Design System?

Colgroup

It is a HTML element that is used to define groups of columns in a table. This is especially helpful on complex tables.

Why should this new feature be added to the Design System?

Colgroup is a standard HTML element would be helpful element to have as an option on the table component.

The team is making use of tables to present information in tabular form. The data is presented in a way that the user is able to see relevant information side-by-side eg.

2019			2020
A	B	C	A	B	C

table markdown is not rendering as expected

Supporting material

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/colgroup

Contacts

No response

[daniellecorke]

We need more information from the user - APMs and developer to meet with them on Tues 4th June.

[daniellecorke]

Meeting with users - 4th June.

Colgroup element / Nunjucks

Anthony Njonge and Ekemena Germany (Kes) work within the Results Team of the Statistical Production Platform (SPP). Their team work with large datasets - the results team produce UIs that display processed results for internal users. The data is survey response data - usually with respondents in the 1000s. They are using version 70 of the Design System.

They are currently manipulating the HTML of the basic table component in order to use the colgroup element. However, their team preference is to use Nunjucks. Therefore they would like the colgroup functionality to be available via the Design System in Nunjucks.

There is another team within SPP who also provide UIs using the table component. They too would benefit from the addition of the colgroup functionality in Nunjucks. They are currently using version 46 of the Design System.

Use of colour

The Results Team are also using the addition of colour to highlight particular columns within their tables, at the preference of their users. They would like this option added to the table component if possible. Currently they are using the grey palette from the Design System Foundations section.

Next steps

This work needs to be discussed by the Design System team, a decision needs to be made about how to proceed with this work and its priority.

Some considerations below:

• If this change is made, the SPP teams will be affected as they will need to make changes to their tables to use the new component.
• Design work is required to assess accessibility and UCD issues that could occur from grouped columns and the use of colour to highlight columns.
• The Results Team have put a workaround in place for the time being and Alessio has shared links with them about how to potentially implement this in Nunjucks until we have looked at this piece of work.
• The table component is used across the SPP service.