Collasible Responsive Table Solution - JSmartable

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

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">
      <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>
    ... Tabular Data Here ...

3. That's it. You can override the default breakpoints in the JavaScript as follows:

  breakpoint: {
    xs: 480,
    sm: 576,
    md: 992,
    lg: 1200,
    xlg: 1400,

4. Override the default expand/collapse icons.

  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.

  allExpended: true

6. Detemine which rows should be opened.

  <tr data-opened="true">

7. Rewrite the column title.

  <td data-title="Rewrite title 1"></td>
  <td data-title="Rewrite title "></td>


v1.1.1 (2019-11-21)

  • Bugfix


  • 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.