Skip links and keyboard navigation

Overview

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

Default

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>