diff --git a/scss/components/README.md b/scss/components/README.md index e1519b59..34609382 100644 --- a/scss/components/README.md +++ b/scss/components/README.md @@ -128,3 +128,44 @@ The masthead is an extended header with search included. ### Similar components elsewhere - [GOV.UK Design system documentation](https://github.com/alphagov/govuk-design-system/blob/b3223714d8f2e9564b7e9d2ca703a3f902bf1ce8/src/stylesheets/components/_masthead.scss) + +## Table component +This enhances the [GOV.UK table component](https://design-system.service.gov.uk/components/table/), making tables on result details pages responsive when loaded in small resolutions. + +### Expected behaviours + +- At high zooms table contents are wrapped and transposed or rotated so all information is still visible. With headings becoming part of the table rows. + +### Usage +```html + + + + + + + + + + + {% for column in entity.column_details %} + + + + + + {% endfor %} + +
Table schema
Column name"DescriptionType
Column name:{{column.display_name}}Description: + {% if column.description %} +
+ {{column.description|default:''|markdown:3}} +
+ {% else %} +

A description for {{column.display_name}} does not exist

+ {% endif %} +
Type:{{column.type|title}}
+``` + +### Similar components elsewhere +- [NHS UK frontend](https://github.com/nhsuk/nhsuk-frontend/blob/e8928ebe19d39fe6137a5ca046217f9ac043b29b/packages/components/tables/_tables.scss#L80)