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