BBnepal-Accounts/account/theme/pages/docs/javascript/expandable-tables.md
Sampanna Rimal 9cd05ef3cb commitall
2024-07-10 18:28:19 +05:45

107 lines
2.5 KiB
Markdown
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

---
layout: page
title: Expandable Table Plugin
---
The expandable table plugin provides simple functionality to create expandable tables.
##### Example Code
```html
<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.
```html
<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.
```js
$('#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)`