Components

Table

Use the table component to make information easier to compare and scan for users.

See the GOV.UK Design System documentation on tables for more information on when to use this component.

Dates and amounts
Date	Amount
First 6 weeks	£109.80 per week
Next 33 weeks	£109.80 per week
Total estimated pay	£4,282.20

<gv-table caption="Dates and amounts">
  <gv-table-head>
    <gv-table-row>
      <gv-table-header>Date</gv-table-header>
      <gv-table-header>Amount</gv-table-header>
    </gv-table-row>
  </gv-table-head>
  <gv-table-body>
    <gv-table-row>
      <gv-table-header scope="row">First 6 weeks</gv-table-header>
      <gv-table-cell>£109.80 per week</gv-table-cell>
    </gv-table-row>
    <gv-table-row>
      <gv-table-header scope="row">Next 33 weeks</gv-table-header>
      <gv-table-cell>£109.80 per week</gv-table-cell>
    </gv-table-row>
    <gv-table-row>
      <gv-table-header scope="row">Total estimated pay</gv-table-header>
      <gv-table-cell>£4,282.20</gv-table-cell>
    </gv-table-row>
  </gv-table-body>
</gv-table>

Shorthand aliases

Shorthand aliases are available to make your code closer to HTML and more succinct.

GOV.UK Vue table components
HTML element	GOV.UK Vue component	Shorthand alias
table	gv-table	None
thead	gv-table-head	gv-thead
tbody	gv-table-body	gv-tbody
tr	gv-table-row	gv-tr
th	gv-table-header	gv-th
td	gv-table-cell	gv-td

<gv-table caption="GOV.UK Vue table components">
  <gv-thead>
    <gv-tr>
      <gv-th>HTML element</gv-th>
      <gv-th>GOV.UK Vue component</gv-th>
      <gv-th>Shorthand alias</gv-th>
    </gv-tr>
  </gv-thead>
  <gv-tbody>
    <gv-tr>
      <gv-td>table</gv-td>
      <gv-td>gv-table</gv-td>
      <gv-td>None</gv-td>
    </gv-tr>
    <gv-tr>
      <gv-td>thead</gv-td>
      <gv-td>gv-table-head</gv-td>
      <gv-td>gv-thead</gv-td>
    </gv-tr>
    <gv-tr>
      <gv-td>tbody</gv-td>
      <gv-td>gv-table-body</gv-td>
      <gv-td>gv-tbody</gv-td>
    </gv-tr>    
    <gv-tr>
      <gv-td>tr</gv-td>
      <gv-td>gv-table-row</gv-td>
      <gv-td>gv-tr</gv-td>
    </gv-tr>
    <gv-tr>
      <gv-td>th</gv-td>
      <gv-td>gv-table-header</gv-td>
      <gv-td>gv-th</gv-td>
    </gv-tr>
    <gv-tr>
      <gv-td>td</gv-td>
      <gv-td>gv-table-cell</gv-td>
      <gv-td>gv-td</gv-td>
    </gv-tr>
  </gv-tbody>
</gv-table>

GvTable

Props

Name	Type	Description
caption	string	The caption text shown above the table. If content is provided in the `caption` slot, this prop will be ignored.
captionClass	string\|array\|object	Class for caption text. You can use `govuk-table__caption--s`, `govuk-table__caption--m`, `govuk-table__caption--l` or `govuk-table__caption--xl` to change the caption size. You can bind a string, an array or an object, as with normal Vue class bindings.

Slots

Name	Description
caption	The content of the caption. If content is provided in this slot, the `caption` prop will be ignored.
default	The `GvTableHead` and `GvTableBody`.

GvTableHead

You can use either gv-table-head or gv-thead to call this component.

Slots

Name	Description
default	A `GvTableRow` containing `GvTableHeader`s

GvTableBody

You can use either gv-table-body or gv-tbody to call this component.

Slots

Name	Description
default	A list of `GvTableRow`s containing `GvTableHeader`s and/or `GvTableCell`s

GvTableRow

You can use either gv-table-row or gv-tr to call this component.

Slots

Name	Description
default	A list of `GvTableHeader`s and/or `GvTableCell`s

GvTableHeader

You can use either gv-table-header or gv-th to call this component.

Props

Name	Type	Description
text	string	Text to show in the table header. If content is provided in the default slot, this prop will be ignored.
format	string	The format of the table header. Currently only accepts `numeric`, which makes the text right-aligned and uses tabular numbers if your font supports them.
scope	string	Whether the header is for the row or the column. Allowed values: `row`, `col`. Defaults to `'col'`.

Slots

Name	Description
default	The content of the table header. If content is provided in this slot, the `text` prop will be ignored.

GvTableCell

You can use either gv-table-cell or gv-td to call this component.

Props

Name	Type	Description
text	string	Text to show in the table cell. If content is provided in the default slot, this prop will be ignored.
format	string	The format of the cell. Currently only accepts `numeric`, which makes the text right-aligned and uses tabular numbers if your font supports them. Allowed values: `numeric`.

Slots

Name	Description
default	The content of the table cell. If content is provided in this slot, the `text` prop will be ignored.