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