Skip links and keyboard navigation

SWE components

Table

Overview

Tables help logically organise content in columns and rows to make it easier to scan, understand or compare data or information.

Default

  • You can use the table class to make the table fill the width of its parent container.
  • Use the <caption> element to describe a table and helps users find and understand tables.
  • Refer to the Bootstrap 4 table component for more implementation advice.
Table caption
HeaderHeaderHeaderHeaderHeader
Cell Cell Cell 7,670,700 3.1%
Cell Cell Cell 5,996,400 2.5%
Cell Cell Cell 517,400 4.0%

Code

<!--
Row header:  <th class="scope="row">
Column header:  <th class="scope="col">
-->

<table class="table">
  <caption>Table caption</caption>
  <thead>
    <tr>
      <th scope="col">Header</th>
      <th scope="col">Header</th>
      <th scope="col">Header</th>
      <th scope="col" class="text-right">Header</th>
      <th scope="col" class="text-right">Header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td class="text-right">7,670,700</td>
      <td class="text-right">3.1%</td>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td class="text-right">5,996,400</td>
      <td class="text-right">2.5%</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td class="text-right">517,400</td>
      <td class="text-right">4.0%</td>
    </tr>
  </tbody>
</table>

With borders

To add borders, apply the class table-bordered to the table element.

Table caption
HeaderHeaderHeaderHeaderHeader
Cell Cell Cell 7,670,700 3.1%
Cell Cell Cell 5,996,400 2.5%
Cell Cell Cell 517,400 4.0%

Code

<!--
Row header:  <th class="scope="row">
Column header:  <th class="scope="col">
-->

<table class="table table-bordered">
  <caption>Table caption</caption>
  <thead>
    <tr>
      <th scope="col">Header</th>
      <th scope="col">Header</th>
      <th scope="col">Header</th>
      <th scope="col" class="text-right">Header</th>
      <th scope="col" class="text-right">Header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td class="text-right">7,670,700</td>
      <td class="text-right">3.1%</td>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td class="text-right">5,996,400</td>
      <td class="text-right">2.5%</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td class="text-right">517,400</td>
      <td class="text-right">4.0%</td>
    </tr>
  </tbody>
</table>

Without zebra stripes

To remove the zebra stripes from rows, apply the class qg-table-no-stripes to the table element.

Table caption
HeaderHeaderHeaderHeaderHeader
Cell Cell Cell 7,670,700 3.1%
Cell Cell Cell 5,996,400 2.5%
Cell Cell Cell 517,400 4.0%

Code

<!--
Row header:  <th class="scope="row">
Column header:  <th class="scope="col">
-->

<table class="table qg-table-no-stripes">
  <caption>Table caption</caption>
  <thead>
    <tr>
      <th scope="col">Header</th>
      <th scope="col">Header</th>
      <th scope="col">Header</th>
      <th scope="col" class="text-right">Header</th>
      <th scope="col" class="text-right">Header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td class="text-right">7,670,700</td>
      <td class="text-right">3.1%</td>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td class="text-right">5,996,400</td>
      <td class="text-right">2.5%</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td class="text-right">517,400</td>
      <td class="text-right">4.0%</td>
    </tr>
  </tbody>
</table>

Searchable and sortable table

Display a data table that is searchable, sortable and has pagination.

Code

<!--
Row header:  <th class="scope="row">
Column header:  <th class="scope="col">
-->

<div class="sortable-table" data-search="true" data-rows="10">
    <table class="dataTable no-footer">
      <caption>Table caption</caption>
      <thead>
        <tr>
          <th scope="col">Header</th>
          <th scope="col">Header</th>
          <th scope="col">Header</th>
          <th scope="col" class="text-right">Header</th>
          <th scope="col" class="text-right">Header</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>A</td>
          <td>B</td>
          <td>C</td>
          <td class="text-right">7,670,700</td>
          <td class="text-right">3.1%</td>
        <tr>
          <td>D</td>
          <td>E</td>
          <td>F</td>
          <td class="text-right">5,996,400</td>
          <td class="text-right">2.5%</td>
        </tr>
        <tr>
          <td>G</td>
          <td>H</td>
          <td>I</td>
          <td class="text-right">517,400</td>
          <td class="text-right">4.0%</td>
        </tr>
      </tbody>
    </table>
</div>
Last updated:
23 January 2024