Basictable
| Project Name | Stars | Downloads | Repos Using This | Packages Using This | Most Recent Commit | Total Releases | Latest Release | Open Issues | License | Language |
|---|---|---|---|---|---|---|---|---|---|---|
| Frontend Stuff | 8,563 | 2 months ago | 7 | other | ||||||
| 📝 A continuously expanded list of frameworks, libraries and tools I used/want to use for building things on the web. Mostly JavaScript. | ||||||||||
| Owlcarousel2 | 7,733 |  | 898 | 102 | 5 months ago | 8 | April 20, 2018 | 1,152 | other | JavaScript |
| DEPRECATED jQuery Responsive Carousel. | ||||||||||
| Fancybox | 7,262 |  | 240 | 24 | a month ago | 23 | March 11, 2019 | 140 | JavaScript | |
| jQuery lightbox script for displaying images, videos and more. Touch enabled, responsive and fully customizable. | ||||||||||
| Metro Ui Css | 6,971 |  | 8 | 4 | 22 days ago | 99 | June 23, 2022 | 67 | mit | CSS |
| Impressive component library for expressive web development! Build responsive projects on the web with the first front-end component library in Metro Style. And now there are even more opportunities every day! | ||||||||||
| Sidr | 2,936 | 13 | 5 years ago | 4 | February 17, 2016 | 21 | mit | JavaScript | ||
| Sidr is a jQuery plugin for creating side menus and the easiest way for doing your menu responsive. | ||||||||||
| Izimodal | 2,137 |  | 36 | 3 | 10 months ago | 17 | May 30, 2022 | 85 | apache-2.0 | CSS |
| Elegant, responsive, flexible and lightweight modal plugin with jQuery. | ||||||||||
| Lightslider | 1,967 |  | 61 | 16 | 2 years ago | 6 | October 25, 2016 | 273 | mit | JavaScript |
| JQuery lightSlider is a lightweight responsive Content slider with carousel thumbnails navigation | ||||||||||
| Devextreme | 1,689 |  | 203 | 155 | 19 hours ago | 594 | July 08, 2022 | 33 | other | JavaScript |
| HTML5 JavaScript Component Suite for Responsive Web Development | ||||||||||
| Jquery Rwdimagemaps | 1,411 | 4 years ago | 1 | August 16, 2016 | 67 | mit | JavaScript | |||
| Responsive Image Maps jQuery Plugin | ||||||||||
| Flexnav | 1,214 | 6 | 7 years ago | November 28, 2013 | 82 | unlicense | CSS | |||
| A jQuery plugin for responsive menus | ||||||||||
Basic Table
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/. This is to assists in those situations where the users don't necessarily have access or capacity to modify HTML such as input from a WYSIWYG.
jQuery User Notes for 2.0.0
The jQuery version remains the same as 1.0.0. While the source remains unchanged there are three things to note when upgrading:
- Distribution files are no longer in the root directory, they've moved to
/dist/js/jquery.basictable.jsand/dist/js/jquery.basictable.min.js, - The non-minified version is now a beautified version rather than the source file, and
- The minified version is no longer compressed with uglifyjs, it's compressed using Tercer.
These changes should have no impact on the way it functions in comparison with 1.x.
Getting Started
jQuery
Include the CSS and jQuery library in the <head> of your page.
<link rel="stylesheet" type="text/css" href="basictable.min.css" />
<script src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.basictable.min.js"></script>
Initiate on any table(s) with:
$('table').basictable();
Vanilla JS
Include the CSS and basictable library in the <head> of your page.
<link rel="stylesheet" type="text/css" href="basictable.min.css" />
<script type="text/javascript" src="basictable.min.js"></script>
Initiate on any table(s) with:
new basictable('table');
Options
Options are applicable to both the jQuery and Vanilla JS.
breakpoint
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.
containerBreakpoint
integer default: null
Define the breakpoint of the table's container 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
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
boolean default: false
When true, empty cells will be shown.
header
boolean default: true
Set to false if table does not have a header row. Table will just be responsive with table body and optional footer.
Methods (jQuery)
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');
restart
Run destroy, setup then check without resetting the table data. Run this if the table dynamically updates.
$('table').basictable('restart');
Methods (Vanilla JS)
Methods demonstrated assuming you've defined the object as table.
const table = new basictable('.table');
start
Engage the table in responsive mode. This method can only run after the table has been initialized.
table.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.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.destroy();
restart
Run destroy, setup then check without resetting the table data. Run this if the table dynamically updates.
table.restart();
