Table-expandable

Examples

Name Service Response time Requests Details
JavaScript ip-172-31-35-213.ec2.internal:8079 2.68 ms 5.13/min

<table class="table table--expandable" data-behavior="accordion">
  <thead>
    <tr>
      <th>Name</th>
      <th>Service</th>
      <th>Response time</th>
      <th>Requests</th>
      <th>Details</th>
    </tr>
  </thead>
  <tbody class="expandable">
    <tr>
      <td>JavaScript</td>
      <td>ip-172-31-35-213.ec2.internal:8079</td>
      <td>4.55 ms</td>
      <td>7.33/min</td>
      <td><a href="#" class="expandable__trigger">more</a></td>
    </tr>
    <tr class="expandable__content">
      <td colspan="5">
        Some expandable content...
      </td>
    </tr>
  </tbody>
  <tbody class="expandable is-expanded">
    <tr>
      <td>Images</td>
      <td>ip-172-31-35-213.ec2.internal:8079</td>
      <td>5.59 ms</td>
      <td>4.09/min</td>
      <td><a href="#" class="expandable__trigger">more</a></td>
    </tr>
    <tr class="expandable__content">
      <td colspan="5">
        More expandable content...
      </td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>JavaScript</td>
      <td>ip-172-31-35-213.ec2.internal:8079</td>
      <td>2.68 ms</td>
      <td>5.13/min</td>
      <td></td>
    </tr>
  </tbody>
  <tbody class="expandable">
    <tr>
      <td>CSS</td>
      <td>ip-172-31-35-213.ec2.internal:8079</td>
      <td>173 ms</td>
      <td>4.08/min</td>
      <td><a href="#" class="expandable__trigger">more</a></td>
    </tr>
    <tr class="expandable__content">
      <td colspan="5">
        More expandable content...
      </td>
    </tr>
  </tbody>
</table>

    
Name Service Response time Requests Details
JavaScript ip-172-31-35-213.ec2.internal:8079 2.68 ms 5.13/min

<div class="theme--blue">
  <table class="table table--expandable" data-behavior="accordion">
    <thead>
      <tr>
        <th>Name</th>
        <th>Service</th>
        <th>Response time</th>
        <th>Requests</th>
        <th>Details</th>
      </tr>
    </thead>
    <tbody class="expandable">
      <tr>
        <td>JavaScript</td>
        <td>ip-172-31-35-213.ec2.internal:8079</td>
        <td>4.55 ms</td>
        <td>7.33/min</td>
        <td><a href="#" class="expandable__trigger">more</a></td>
      </tr>
      <tr class="expandable__content">
        <td colspan="5">
          Some expandable content...
        </td>
      </tr>
    </tbody>
    <tbody class="expandable is-expanded">
      <tr>
        <td>Images</td>
        <td>ip-172-31-35-213.ec2.internal:8079</td>
        <td>5.59 ms</td>
        <td>4.09/min</td>
        <td><a href="#" class="expandable__trigger">more</a></td>
      </tr>
      <tr class="expandable__content">
        <td colspan="5">
          More expandable content...
        </td>
      </tr>
    </tbody>
    <tbody>
      <tr>
        <td>JavaScript</td>
        <td>ip-172-31-35-213.ec2.internal:8079</td>
        <td>2.68 ms</td>
        <td>5.13/min</td>
        <td></td>
      </tr>
    </tbody>
    <tbody class="expandable">
      <tr>
        <td>CSS</td>
        <td>ip-172-31-35-213.ec2.internal:8079</td>
        <td>173 ms</td>
        <td>4.08/min</td>
        <td><a href="#" class="expandable__trigger">more</a></td>
      </tr>
      <tr class="expandable__content">
        <td colspan="5">
          More expandable content...
        </td>
      </tr>
    </tbody>
  </table>
</div>

    
Name Service Response time Requests Details
JavaScript ip-172-31-35-213.ec2.internal:8079 2.68 ms 5.13/min

<div class="theme--royalblue">
  <table class="table table--expandable" data-behavior="accordion">
    <thead>
      <tr>
        <th>Name</th>
        <th>Service</th>
        <th>Response time</th>
        <th>Requests</th>
        <th>Details</th>
      </tr>
    </thead>
    <tbody class="expandable">
      <tr>
        <td>JavaScript</td>
        <td>ip-172-31-35-213.ec2.internal:8079</td>
        <td>4.55 ms</td>
        <td>7.33/min</td>
        <td><a href="#" class="expandable__trigger">more</a></td>
      </tr>
      <tr class="expandable__content">
        <td colspan="5">
          Some expandable content...
        </td>
      </tr>
    </tbody>
    <tbody class="expandable is-expanded">
      <tr>
        <td>Images</td>
        <td>ip-172-31-35-213.ec2.internal:8079</td>
        <td>5.59 ms</td>
        <td>4.09/min</td>
        <td><a href="#" class="expandable__trigger">more</a></td>
      </tr>
      <tr class="expandable__content">
        <td colspan="5">
          More expandable content...
        </td>
      </tr>
    </tbody>
    <tbody>
      <tr>
        <td>JavaScript</td>
        <td>ip-172-31-35-213.ec2.internal:8079</td>
        <td>2.68 ms</td>
        <td>5.13/min</td>
        <td></td>
      </tr>
    </tbody>
    <tbody class="expandable">
      <tr>
        <td>CSS</td>
        <td>ip-172-31-35-213.ec2.internal:8079</td>
        <td>173 ms</td>
        <td>4.08/min</td>
        <td><a href="#" class="expandable__trigger">more</a></td>
      </tr>
      <tr class="expandable__content">
        <td colspan="5">
          More expandable content...
        </td>
      </tr>
    </tbody>
  </table>
</div>

    
Name Service Response time Requests Details
JavaScript ip-172-31-35-213.ec2.internal:8079 2.68 ms 5.13/min

<div class="theme--green">
  <table class="table table--expandable" data-behavior="accordion">
    <thead>
      <tr>
        <th>Name</th>
        <th>Service</th>
        <th>Response time</th>
        <th>Requests</th>
        <th>Details</th>
      </tr>
    </thead>
    <tbody class="expandable">
      <tr>
        <td>JavaScript</td>
        <td>ip-172-31-35-213.ec2.internal:8079</td>
        <td>4.55 ms</td>
        <td>7.33/min</td>
        <td><a href="#" class="expandable__trigger">more</a></td>
      </tr>
      <tr class="expandable__content">
        <td colspan="5">
          Some expandable content...
        </td>
      </tr>
    </tbody>
    <tbody class="expandable is-expanded">
      <tr>
        <td>Images</td>
        <td>ip-172-31-35-213.ec2.internal:8079</td>
        <td>5.59 ms</td>
        <td>4.09/min</td>
        <td><a href="#" class="expandable__trigger">more</a></td>
      </tr>
      <tr class="expandable__content">
        <td colspan="5">
          More expandable content...
        </td>
      </tr>
    </tbody>
    <tbody>
      <tr>
        <td>JavaScript</td>
        <td>ip-172-31-35-213.ec2.internal:8079</td>
        <td>2.68 ms</td>
        <td>5.13/min</td>
        <td></td>
      </tr>
    </tbody>
    <tbody class="expandable">
      <tr>
        <td>CSS</td>
        <td>ip-172-31-35-213.ec2.internal:8079</td>
        <td>173 ms</td>
        <td>4.08/min</td>
        <td><a href="#" class="expandable__trigger">more</a></td>
      </tr>
      <tr class="expandable__content">
        <td colspan="5">
          More expandable content...
        </td>
      </tr>
    </tbody>
  </table>
</div>

    

Introduction

The Groundhog expandable table is an extension of a basic table and can be used to represent data and related detailed information (if available) in a separate row. By clicking the trigger-link (.expandable__trigger) the expandable content appears.

Including an expandable table

An expandable table is an extension of a basic table.

  1. To use expandable rows in a table mark the table as expandable by adding the .table--expandable class to the table element.
    <table class="table table--expandable">
    ...
    </table>
    
  2. An expandable row and the related detailed content are grouped by a tbody element. Place the trigger-link in the first row and the expandable content in the second one within a td element that extends over all columns. There can be any number of tbody elements inside a table.
    <table class="table table--expandable">
    ...
    <tbody class="expandable">
     <tr>
       ...
       <td><a href="#" class="expandable__trigger">more</a></td>
     </tr>
     <tr class="expandable__content">
       <td colspan="5">
         Expandable content...
       </td>
     </tr>
    </tbody>
    </table>
    
  3. When the content is expanded by clicking the trigger-link, an .is-expanded class is added to the expandable table row.
    ...
    <tr class="expandable__content is-expanded">
     <td colspan="5">
       Expandable content...
     </td>
    </tr>
    ...
    
  4. To use another theme color (see below) add a wrapping div with the according theme class (optional):
    <div class="theme--green">
    <table class="table table--expandable">
     ...
    </table>
    </div>
    

Available themes for expandable table

The default theme for the expandable table is purple, other available themes are:

class name theme color
.theme--blue Base class blue theme
.theme--royalblue Base class royalblue theme
.theme--green Base class green theme