Find me on GitHub
Breadcrumbs Button Buttongroup Caption Checkbox Datepicker Definition-list Expandable Footer Icons Infochip Inputfield List Loading Media Navbar Pagination Progressbar Progresscircle Radiobutton Select Sidebar Slider Subnav Switch Table Table-expandable Tabs Tag Textarea Tile

Table-expandable

In groundhog since v0.1.1

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-active">
    <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 

<table class="table table--expandable">
  <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-active">
    <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 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-active">
      <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-active">
      <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--purple">
  <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-active">
      <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-active class is added to the expandable table row.
    ...
<tr class="expandable__content is-active">
 <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>

Behavior

If the attribute data-behavior="accordion" is added to the <table> element only one expandable content is active at a time.

<table class="table table--expandable" data-behavior="accordion">
  ...
</table>

Available themes for expandable table

The default theme for the expandable table is turquoise, 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
.theme--purple Base class purple theme