Expandable Table Plugin

The expandable table plugin provides simple functionality to create expandable tables.

Example Code

<table class="table table-bordered table-hover">
  <tbody>
    <tr data-widget="expandable-table" aria-expanded="false">
      <td>183</td>
    </tr>
    <tr class="expandable-body">
      <td>
        <p>
          <!-- YOUR EXPANDABLE TABLE BODY HERE -->
        </p>
      </td>
    </tr>
    <tr data-widget="expandable-table" aria-expanded="true">
      <td>219</td>
    </tr>
    <tr class="expandable-body">
      <td>
        <p>
          <!-- YOUR EXPANDABLE TABLE BODY HERE -->
        </p>
      </td>
    </tr>
    <tr data-widget="expandable-table" aria-expanded="true">
      <td>657</td>
    </tr>
    <tr class="expandable-body">
      <td>
        <p>
          <!-- YOUR EXPANDABLE TABLE BODY HERE -->
        </p>
      </td>
    </tr>
  </tbody>
</table>

Tip!

You can control the default visibility with ` aria-expanded=”false”/ aria-expanded=”true”` via the expandable table header.

Usage

This plugin can be activated as a jQuery plugin or using the data api.

Data API

Add data-widget="expandable-table" to a table row to activate the plugin and place a new table row below with the .expandable-body-class.

<tr data-widget="expandable-table" aria-expanded="true">
  <td>657</td>
</tr>
<tr class="expandable-body">
  <td>
    <p>
    </p>
  </td>
</tr>

Tip!

To get the correct slide up/down animation place a div or p-tag inside your expandable table body.

jQuery

The jQuery API provides more customizable options that allows the developer to toggle the visibilty state of one table row.

$('#expandable-table-header-row').ExpandableTable('toggleRow')

Methods

Example: $('#expandable-table-header-row').ExpandableTable('toggleRow')

Events

Example: $('#expandable-table-header-row').on('expanded.lte.expandableTable', handleToggledEvent)