| First Name | Last Name | Job Title | DOB | Status |
|---|---|---|---|---|
| Isidra | Boudreaux | Traffic Court Referee | 22 Jun 1972 | Active |
| Shona | Woldt | Airline Transport Pilot | 3 Oct 1981 | Disabled |
| Granville | Leonardo | Business Services Sales Representative | 19 Apr 1969 | Suspended |
| Easer | Dragoo | Drywall Stripper | 13 Dec 1977 | Active |
| Maple | Halladay | Aviation Tactical Readiness Officer | 30 Dec 1991 | Suspended |
| Maxine | Woldt | Business Services Sales Representative | 17 Oct 1987 | Disabled |
| Lorraine | Mcgaughy | Hemodialysis Technician | 11 Nov 1983 | Disabled |
| Lizzee | Goodlow | Technical Services Librarian | 1 Nov 1961 | Suspended |
| Judi | Badgett | Electrical Lineworker | 23 Jun 1981 | Active |
| Lauri | Hyland | Blackjack Supervisor | 15 Nov 1985 | Suspended |
FooTable will automatically add the "toggler" to the first column by default. The "toggler" is the plus/minus icon which expands and collapses the row when a FooTable breakpoint has fired
You can specify which of your columns is the toggle column (the column which has the toggle icon) by adding data-toggle="true":
<thead>
<tr>
<th>
First Name
</th>
<th data-toggle="true">
Last Name
</th>
</tr>
</thead>
FooTable comes with a couple built-in icons to choose from. Check out the icon styles demo and take your pick!
You might not want to show a toggler at all in your table. Simply set the addRowToggle option to false
$('.footable').footable({
addRowToggle: false
});