First Name | Last Name | Status |
---|---|---|
Isidra | Boudreaux | Active |
Shona | Woldt | Disabled |
Granville | Leonardo | Suspended |
Easer | Dragoo | Active |
Maple | Halladay | Suspended |
Maxine | Woldt | Disabled |
Lorraine | Mcgaughy | Disabled |
Lizzee | Goodlow | Suspended |
Judi | Badgett | Active |
Lauri | Hyland | Suspended |
<link href="path_to_your_css/footable.core.css" rel="stylesheet" type="text/css" />
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.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="path_to_your_js/footable.js" type="text/javascript"></script>
<script type="text/javascript"> $(function () { $('.footable').footable(); }); </script>
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 } });
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 |
---|---|
Name | [none] |
Job Title | data-hide="phone" |
Status | data-hide="phone,tablet" |
Description | data-hide="all" |
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)