Basic FooTable
class="table footable"
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird | |
| 4 | Sussy | Watcher | @thehawk |
| 5 | Roger | Diamond | @fieldgoal |
| 6 | Michael | Lawrence | @thebest |
FooTable w/Filter
data-filter="#fooFilter"
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird | |
| 4 | Sussy | Watcher | @thehawk |
| 5 | Roger | Diamond | @fieldgoal |
| 6 | Michael | Lawrence | @thebest |
FooTable w/Pagination
data-page-navigation=".pagination"
| # | First Name | Last Name | Username | |
|---|---|---|---|---|
| 1 | Mark | Otto | @mdo | |
| 2 | Jacob | Thornton | @fat | |
| 3 | Larry | the Bird | ||
| 4 | Sussy | Watcher | @thehawk | |
| 5 | Roger | Diamond | @fieldgoal | |
| 6 | Michael | Lawrence | @thebest | |
| 1 | Mark | Otto | @mdo | |
| 2 | Jacob | Thornton | @fat | |
| 3 | Larry | the Bird | ||
| 4 | Sussy | Watcher | @thehawk | |
| 5 | Roger | Diamond | @fieldgoal | |
| 6 | Michael | Lawrence | @thebest | |
| 1 | Mark | Otto | @mdo | |
| 2 | Jacob | Thornton | @fat | |
| 3 | Larry | the Bird | ||
| 4 | Sussy | Watcher | @thehawk | |
| 5 | Roger | Diamond | @fieldgoal | |
| 6 | Michael | Lawrence | @thebest | |
| 1 | Mark | Otto | @mdo | |
| 2 | Jacob | Thornton | @fat | |
| 3 | Larry | the Bird | ||
| 4 | Sussy | Watcher | @thehawk | |
| 5 | Roger | Diamond | @fieldgoal | |
| 6 | Michael | Lawrence | @thebest | |
Expanding Rows
class="table footable fw-labels"
| Action | Details | Details |
|---|---|---|
| Primary | This is a Footable expandable "Primary" row | You can use this style by formatting the table row like this <tr class="row-primary"> |
| Info | This is a Footable expandable "Info" row | You can use this style by formatting the table row like this <tr class="row-info"> |
| Success | This is a Footable expandable "Success" row | You can use this style by formatting the table row like this <tr class="row-success"> |
| Warning | This is a Footable expandable "Warning" row | You can use this style by formatting the table row like this <tr class="row-warning"> |
| Danger | This is a Footable expandable "Danger" row | You can use this style by formatting the table row like this <tr class="row-danger"> |
| Alert | This is a Footable expandable "Alert" row | You can use this style by formatting the table row like this <tr class="row-alert"> |
| System | This is a Footable expandable "System" row | You can use this style by formatting the table row like this <tr class="row-system"> |
| Dark | This is a Footable expandable "Dark" row | You can use this style by formatting the table row like this <tr class="row-dark"> |