 |
| Table Responsive Plugin For jQuery |
BasicTable.js is a very lightweight jQuery plugin for creating responsive, mobile-readable data table using the JS resize() method and CSS3 media queries.
How to use it:
1. Include the required jQuery basic table plugin stylesheet in the head section of your web page.
<link rel="stylesheet" href="basictable.css">
2. Include the jQuery basic table plugin script after you've installed jQuery library.
<script src="jquery.min.js"></script> <script src="jquery.basictable.min.js"></script>
3. Create a standard table on your web page.
<table id="table">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jill Smith</td>
<td>25</td>
</tr>
</tbody>
</table>
4. The basic implementation using all default settings. Use breakpoint option to custom the viewport's width when the table will engage in responsive mode.
$('#table').basictable({breakpoint: 641});
5. Use CSS3 media queries instead of breakpoint option.
@media only screen and (max-width: 568px) {
#table thead {
display: none;
}
#table tbody td {
border: none !important;
display: block;
vertical-align: top;
}
#table tbody td:before {
content: attr(data-th) ": ";
display: inline-block;
font-weight: bold;
width: 6.5em;
}
#table tbody td.bt-hide {
display: none;
}
}
6. All the default settings.
breakpoint: 568: Custom breakpointcontentWrap: true: Wraps the original content within the cell in a span with class .bt-content, to help with CSS selection.forceResponsive: 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: 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: 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.showEmptyCells: false:When true, empty cells will be shown.containerBreakpoint: null: Define the breakpoint of the table's container when the table will engage in responsive mode.header: true: Set to false if table does not have a header row. Table will just be responsive with table body and optional footer.
7. Available methods.
$('table').basictable('start');
$('table').basictable('stop');
$('table').basictable('destroy');
Live Demo
See the Pen Untitled by Plugin JS (@teguhsigit) on CodePen.
File Info
- File Name :
- basictable-master.zip
- Size :
- 51.41KB
- Site Download :
- Github.com
- Official Website:
- Go to website
- License:
- MIT