secure-sharing/SecureSharing/wwwroot/docs/javascript/expandable-tables.md

---

layout: page

title: 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>

{: .max-height-300}

Tip!

You can control the default visibility with aria-expanded="false"/aria-expanded="true" via the expandable table header. {: .quote-info}

Usage

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

Data API

{: .text-bold } 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. {: .quote-info}

jQuery

{: .text-bold } 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

{: .mt-4}

|--- | Method | Description |-|- |toggleRow | Toggles the state of the expandable table body between hidden and visible. {: .table .table-bordered .bg-light}

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

Events

{: .mt-4}

|--- | Event Type | Description |-|- |expanded.lte.expandableTable | Triggered after a expandable table body is expanded. |collapsed.lte.expandableTable | Triggered after a expandable table body is collapsed. {: .table .table-bordered .bg-light}

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