FooTable - jQuery plugin for responsive HTML tables

A demo showing how to hide a column completely, so it does not show in the table or the row detail.

Notice the column below named ID. When the FooTable is initialized, that column will be hidden. Even when resizing the table to smaller sizes, the detail for the column will not be shown.

Initialize the FooTable!

ID | First Name | Job Title | DOB | Status
--- | --- | --- | --- | ---
1 | Isidra | Traffic Court Referee | 22 Jun 1972 | Active
2 | Shona | Airline Transport Pilot | 3 Oct 1981 | Disabled
3 | Granville | Business Services Sales Representative | 19 Apr 1969 | Suspended
4 | Easer | Drywall Stripper | 13 Dec 1977 | Active
5 | Maple | Aviation Tactical Readiness Officer | 30 Dec 1991 | Suspended
6 | Maxine | Business Services Sales Representative | 17 Oct 1987 | Disabled
7 | Lorraine | Hemodialysis Technician | 11 Nov 1983 | Disabled
8 | Lizzee | Technical Services Librarian | 1 Nov 1961 | Suspended
9 | Judi | Electrical Lineworker | 23 Jun 1981 | Active
10 | Lauri | Blackjack Supervisor | 15 Nov 1985 | Suspended

#### Setting Up Hidden Columns

All you need to do is add a few data attributes for the column:

`data-hide="all"` - this makes sure the column is hidden at all breakpoints

`data-ignore="true"` - this makes sure the column is left out the of detail row

This can be seen for the Job Title column in the example below:

    <table class="footable table">
    	<thead>
    		<tr>
    			<th data-ignore="true" data-hide="all">ID</th>
    			<th data-toggle="true">Name</th>
    			<th data-hide="phone,tablet">Status</th>
    		</tr>
    	</thead>