FooTable - jQuery plugin for responsive HTML tables

A simple demo to get you up and running with FooTable in 5 minutes.

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

1. #### Include FooTable Core CSS

       <link href="path_to_your_css/footable.core.css" rel="stylesheet" type="text/css" />

2. #### [optional] Include FooTable Theme CSS

   FooTable is now built to work with Twitter Bootstrap out of the box - WOOT!

   But you can also use one of our built-in themes if you want:

       <link href="path_to_your_css/themes/footable.standalone.css" rel="stylesheet" type="text/css" />

   Check out the demos for our Metro and Original FooTable themes.

3. #### Include jQuery

       <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>

4. #### Include FooTable jQuery Plugin

       <script src="path_to_your_js/footable.js" type="text/javascript"></script>

5. #### Initialize FooTable!

       <script type="text/javascript">
       	$(function () {
       		$('.footable').footable();
       	});
       </script>

#### Breakpoints

FooTable works off the concept of breakpoints. These can be customized, but the default breakpoints are

    breakpoints: {
    	phone: 480,
    	tablet: 1024
    }

To change the breakpoints simply pass in a breakpoints option when initializing FooTable:

    $('.footable').footable({
        breakpoints: {
            tiny: 100,
            medium: 555,
            big: 2048
        }
    });

#### Column Setup (using data attributes)

You then need to tell FooTable which columns to hide on which breakpoints, by specifying `data-hide` attributes on the table head columns:

    <table class="footable table">
    	<thead>
    		<tr>
    			<th>Name</th>
    			<th data-hide="phone">Job Title</th>
    			<th data-hide="phone,tablet">Status</th>
    			<th data-hide="all">Description</th>
    		</tr>
    	</thead>

In the above example the following will be true:

Column | Data Attribute | Shown on Desktop | Shown on Tablet | Shown on Phone
--- | --- | --- | --- | ---
Name | [none] | yes | yes | yes
Job Title | `data-hide="phone"` | yes | yes | no
Status | `data-hide="phone,tablet"` | yes | no | no
Description | `data-hide="all"` | no | no | no

You can set a column to always be hidden, by adding `data-hide="all"` to the table head column. (Check out the icon styles demo to see this in action)