A simple basic jQuery plugin which gives a couple of options for displaying tables on handheld devices.
Tables are the necessary evil. Admit it! It is a bit painful to adjust tables on small devices so the information is presented beautifully and easily understood.
Jerry Low (the creator of this plugin) wanted to create a simple and lightweight plugin that will cope with responsive tables in terms of users that do not have the knowledge or the tools to set up the tags to achieve such CSS responsive tables. And the plugin is done just to get the job done.
It is a simple solution, you just need to choose your preferred look for the tables from this jQuery library and implement it. For more extensive library, you can check FooTable. If you are looking for other simple solution for responsive tables, you can refer to jQuery Restable.
Have a look below how to use the library and check out the demo:
Image may be NSFW.
Clik here to view.
Setup
Your table does not need any special setup. You can use thead with th tags or just all td the table will just read the first row as the headings. A standard table like the following will work.
<table> <thead> <tr> <th>One</th> <th>Two</th> <th>Three</th> </tr> </thead> <tbody> <tr> <td>Test One</td> <td>Test Two</td> <td>Test Three</td> </tr> </tbody> </table>
Select the table with a standard jQuery selector then initiate the library.
$('table').basictable();
Configure the options of the table during initialization. A list of options and their properties to follow. Here’s a sample of modifying the table’s breakpoint and force responsive property.
$('table').basictable({
breakpoint: 1024,
forceResponsive: false
});
Options
Here are some options to configure the way your responsive table works.
breakpoint
integer, default: 568
Define the breakpoint (viewport’s width) when the table will engage in responsive mode.
contentWrap
boolean default: true
Wraps the original content within the cell in a span with class .bt-content, to help with CSS selection.
forceResponsive
boolean default: true
The library will always force the table into responsive mode once the breakpoint is met. If this is set to false the table will only change mode when the table itself is larger than its immediate parent’s inner width.
noResize
boolean default: false
Disable Basic Table’s JS resize. The table won’t engage in responsive mode unless media query or another resize bind outside of Basic Table is defined.
tableWrap
boolean default: false
DWhen the library is initialize create a div wrapper around the table with class .bt-wrapper. This wrapper will toggle an active class when the table mode changes.
Methods
Call upon these methods anytime after Basic Table has initialized.
start
Engage the table in responsive mode. This method can only run after the table has been initialized.
$('table').basictable('start');
stop
Toggle the table back to normal mode, removing the responsive look. This does not destory the Basic Table data and wrappers. The table will still work once the breakpoint is met.
$('table').basictable('stop');
destroy
Destroy the the responsive bind on the table. This will remove all data and generated wrappers from the table, returning it to its initial state.
$('table').basictable('destroy');