Skip links and keyboard navigation

SWE components

Table

On this page

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.

View example in Storybook

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.

View example in Storybook

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.

View example in Storybook

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.

View example in Storybook

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:
28 June 2024