Collasible Responsive Table Solution - JSmartable
File Size: | 10.2 KB |
---|---|
Views Total: | 2462 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

JSmartable is a user-friendly, cross-platform, responsive table solution that automatically collapses overflowed table columns into sub-tables just like a tree structure.
How to use it:
1. By default, the plugin uses Font Awesome Iconic Font for the expand/collase icons.
<link href="/path/to/font-awesome/all.css" rel="stylesheet">
2. Add the CSS class jsmartable
to the HTML table and determine at which breakpoints the columns should show/hide using the data-breakpoint
attribute.
<table class="jsmartable"> <thead> <tr> <th>ID</th> <th data-breakpoint="xs">1 Column</th> <th>2 Column</th> <th data-breakpoint="sm">3 Column</th> <th data-breakpoint="md">4 Column</th> <th data-breakpoint="lg">Lastname</th> <th data-breakpoint="lg">Firstname</th> <th data-breakpoint="md">Title</th> <th data-breakpoint="md">Description</th> <th>Action</th> </tr> </thead> <tbody> ... Tabular Data Here ... </tbody> </table>
3. That's it. You can override the default breakpoints in the JavaScript as follows:
$(".jsmartable").jsmartable({ breakpoint: { xs: 480, sm: 576, md: 992, lg: 1200, xlg: 1400, } });
4. Override the default expand/collapse icons.
$(".jsmartable").jsmartable({ iconPlus: '<i class="fas fa-plus text-info"></i>', iconMinus: '<i class="fas fa-minus text-danger"></i>' });
5. Detemine whether or not to expand all sub-tables on page load.
$(".jsmartable").jsmartable({ allExpended: true });
6. Detemine which rows should be opened.
<tbody> <tr data-opened="true"> ... </tr> ... </tbody>
7. Rewrite the column title.
<tr> <td data-title="Rewrite title 1"></td> <td></td> <td data-title="Rewrite title "></td> ... </tr>
Changelog:
v1.1.1 (2019-11-21)
- Bugfix
2019-10-19
- Add possibility to override title of a column
v1.0.0 (2019-10-03)
- Compatible with Font Awesome 4.
This awesome jQuery plugin is developed by d4v1dm013. For more Advanced Usages, please check the demo page or visit the official website.