A simple lightweight jQuery or Vanilla JS responsive table library. A library to setup tables for a basic responsive table stucture. Utilizing the techniques of http://css-tricks.com/responsive-data-tables/.
I started looking into this concept mainly from building sites where tables were generated by users from a WYSIWYG editor or other markdown inputs. The users often don't have the tools or knowledge to setting up the tags to achieve the CSS responsive tables previously described. This library is meant to be very lightweight, simply and get the job done as such. If you're seeking a more extensive library I highly recommend FooTable.
View jQuery Demo View Vanilla JS Demo View on Github
If the demo above does not explain this library very well hopefully this visual does. It simple stacks the table to fit into a narrow viewport.
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();
Select the table with a standard DOMString.
new basictable('table')
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
});
Here's the configuration with Vanilla JS option
new basictable('table', {
breakpoint: 1024,
forceResponsive: false
});
Here are some options to configure the way your responsive table works. These option and applicable to both versions.
integer, default: null
Define the breakpoint (viewport's width) when the table will engage in responsive mode. If the containerBreakpoint is null (which is the default) the value will be 568px.
integer, default: null
Define the breakpoint of the table's container when the table will engage in responsive mode.
boolean default: true
Wraps the original content within the cell in a span with class .bt-content, to help with CSS selection.
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.
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.
boolean default: false
When 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.
boolean default: false
When true, empty cells will be shown.
Call upon these methods anytime after Basic Table has initialized.
Engage the table in responsive mode. This method can only run after the table has been initialized.
$('table').basictable('start');
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 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');
Run `destroy`, `setup` then `check` without resetting the table data. Run this if the table dynamically updates.
$('table').basictable('restart');
Methods demonstrated assuming you've defined the object as `table`.
Engage the table in responsive mode. This method can only run after the table has been initialized.
table.start();
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.stop();
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.destroy();
Run `destroy`, `setup` then `check` without resetting the table data. Run this if the table dynamically updates.
table.restart();
Author: Jerry Low (@jerrylowm) | Palette Design: Amit Jakhu (@amitjakhu)