Unofficial
Internal
Components
Table
Use the table component to make information easier to compare and scan for users.
| Date | Amount |
|---|---|
| First 6 weeks | £109.80 per week |
| Next 33 weeks | £109.80 per week |
| Total estimated pay | £4,282.20 |
Props
| Name | Type | Default | Description |
|---|---|---|---|
| id | other | 'id' attribute to place on the base HTML element | |
| classBlock | other | Block name override in BEM style classes applied to all elements | |
| classModifiers | other | BEM style modifiers to apply to the base HTML element | |
| className | other | Extra classes to apply to the base HTML element | |
| caption | other | ||
| data | other | ||
| headings | other | ||
| keys | other |
When to use this component
Use the table component to let users compare information in rows and columns.
When not to use this component
Never use the table component to layout content on a page. Instead, use the grid system.
How it works
Table captions
Use the <caption> element to describe a table in the same way you would use a heading. A caption helps users find, navigate and understand tables.
To use a custom caption, supply your element to the prop. (Supplying a string will receive standard styling with the govuk-table__caption--m class.)
Stories
Standard
A standard Table.
| Date | Amount |
|---|---|
| First 6 weeks | £109.80 per week |
| Next 33 weeks | £109.80 per week |
| Total estimated pay | £4,282.20 |
Numbers in a table
IMPLEMENT ME.
Custom column widths
IMPLEMENT ME.