Alpha

This is an alpha release of our documentation site. View the roadmap.

Tables

On this page

Open example in a new tab
Post box collection times (Monday to Friday)
Your location Post box collection times
Your location City or town Post box collection times 9am to 6.30pm
Your location Areas with lots of businesses - known as commercial Post box collection times 9am to 7.30pm
Your location Very rural areas - for example, where there aren't many people Post box collection times 9am to 4pm
Your location Rest of the UK Post box collection times 9am to 5.30pm 
<div class="cads-table-container">
  <table class="cads-table cads-table--captioned cads-table--responsive-headers">
    <caption>Post box collection times (Monday to Friday)</caption>
    <thead>
      <tr>
        <th scope="col">
          <span class="cads-table__content">Your location</span>
        </th>
        <th scope="col">
          <span class="cads-table__content">Post box collection times</span>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <span class="cads-table__th-heading" data-testid="table-inline-heading">Your location</span>
          <span class="cads-table__content">City or town</span>
        </td>
        <td>
          <span class="cads-table__th-heading" data-testid="table-inline-heading">Post box collection times</span>
          <span class="cads-table__content">9am to 6.30pm</span>
        </td>
      </tr>
      <tr>
        <td>
          <span class="cads-table__th-heading" data-testid="table-inline-heading">Your location</span>
          <span class="cads-table__content">Areas with lots of businesses - known as commercial</span>
        </td>
        <td>
          <span class="cads-table__th-heading" data-testid="table-inline-heading">Post box collection times</span>
          <span class="cads-table__content">9am to 7.30pm</span>
        </td>
      </tr>
      <tr>
        <td>
          <span class="cads-table__th-heading" data-testid="table-inline-heading">Your location</span>
          <span class="cads-table__content">Very rural areas - for example, where there aren&#39;t many people</span>
        </td>
        <td>
          <span class="cads-table__th-heading" data-testid="table-inline-heading">Post box collection times</span>
          <span class="cads-table__content">9am to 4pm</span>
        </td>
      </tr>
      <tr>
        <td>
          <span class="cads-table__th-heading" data-testid="table-inline-heading">Your location</span>
          <span class="cads-table__content">Rest of the UK</span>
        </td>
        <td>
          <span class="cads-table__th-heading" data-testid="table-inline-heading">Post box collection times</span>
          <span class="cads-table__content">9am to 5.30pm</span>
        </td>
      </tr>
    </tbody>
  </table>
</div>
<%= render(CitizensAdviceComponents::Table.new(
  caption: "Post box collection times (Monday to Friday)",
  header: [
    "Your location",
    "Post box collection times"
  ],
  rows: [
    [
      "City or town",
      "9am to 6.30pm"
    ], [
      "Areas with lots of businesses - known as commercial",
      "9am to 7.30pm"
    ], [
      "Very rural areas - for example, where there aren't many people",
      "9am to 4pm"
    ], [
      "Rest of the UK",
      "9am to 5.30pm"
    ]
  ]
)) %>

Variations

Without responsive headers

By default the table component changes its structure on smaller devices. This adds the table heading text to each table cell. This is useful for longer tables that have a lot of data, but it can be disabled for shorter tables using the responsive_headers: false argument.

Open example in a new tab
Office times
Day Time
Monday 9.15am to 5.15pm
Tuesday 9.15am to 5.15pm
Wednesday 9.15am to 5.15pm
Thursday 9.15am to 5.15pm 
<div class="cads-table-container">
  <table class="cads-table cads-table--captioned">
    <caption>Office times</caption>
    <thead>
      <tr>
        <th scope="col">
          <span class="cads-table__content">Day</span>
        </th>
        <th scope="col">
          <span class="cads-table__content">Time</span>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <span class="cads-table__content">Monday</span>
        </td>
        <td>
          <span class="cads-table__content">9.15am to 5.15pm</span>
        </td>
      </tr>
      <tr>
        <td>
          <span class="cads-table__content">Tuesday</span>
        </td>
        <td>
          <span class="cads-table__content">9.15am to 5.15pm</span>
        </td>
      </tr>
      <tr>
        <td>
          <span class="cads-table__content">Wednesday</span>
        </td>
        <td>
          <span class="cads-table__content">9.15am to 5.15pm</span>
        </td>
      </tr>
      <tr>
        <td>
          <span class="cads-table__content">Thursday</span>
        </td>
        <td>
          <span class="cads-table__content">9.15am to 5.15pm</span>
        </td>
      </tr>
    </tbody>
  </table>
</div>
<%= render(CitizensAdviceComponents::Table.new(
  caption: "Office times",
  header: %w[Day Time],
  rows: [
    [
      "Monday",
      "9.15am to 5.15pm"
    ], [
      "Tuesday",
      "9.15am to 5.15pm"
    ], [
      "Wednesday",
      "9.15am to 5.15pm"
    ], [
      "Thursday",
      "9.15am to 5.15pm"
    ]
  ],
  responsive_headers: false
)) %>

Using with Rails

If you are using the citizens_advice_components gem, you can call the component from within a template using:

<%= render(CitizensAdviceComponents::Table.new(
  caption: "Post box collection times (Monday to Friday)",
  header: [
    "Your location",
    "Post box collection times"
  ],
  rows: [
    [
      "City or town",
      "9am to 6.30pm"
    ], [
      "Areas with lots of businesses - known as commercial",
      "9am to 7.30pm"
    ], [
      "Very rural areas - for example, where there aren't many people",
      "9am to 4pm"
    ], [
      "Rest of the UK",
      "9am to 5.30pm"
    ]
  ]
)) %>

Component arguments

Argument Description
Argument header Description Required, array of header label
Argument rows Description Required, nested array of row contents
Argument caption Description Optional, <caption> text
Argument responsive_headers Description Optional. Defaults to true. If set to false the table will use the desktop structure on smaller devices.