JSmartable

Jquery free plugin to provide dynamic collapsable responsive table

Getting Started

Quick start

JSmartable is a Jquery free plugin to provide dynamic collapsable responsive table. You can choose a specific breakpoint for each column you want to hide sor the specified breakpoint. It's very simple to use, and requires only jQuery v1.9.1+, Bootstrap CSS and Fontawesome v4 or v5.

Several quick start options are availables:

• Clone the repo: git clone https://github.com/larevuegeek/jsmartable
• Install with npm: npm install jsmartable
• Install with yarn: yarn add jsmartable

Demo

Demo : https://jsmartable.zestededev.com/

Usage

You have to create a table with a thead and tbody section. For the plugin to work you must specify the for each th contained in the thead section the data-breakpoint you want to apply.

Below the list of possible breakpoint (you can mix different breakpoint in your thead) :

• xs: <= 480px
• sm: <= 576px
• md: <= 992px
• lg: <= 1200px
• xlg: <= 1400px

<table class="table jsmartable">
    <thead>
        <tr>
            <th data-breakpoint="lg">ID</th>
            <th data-breakpoint="lg">1 Column</th>
            <th>2 Column</th>
            <th data-breakpoint="md">3 Column</th>
            <th data-breakpoint="md">4 Column</th>
            <th data-breakpoint="md">Lastname</th>
            <th data-breakpoint="xs">Firstname</th>
            <th data-breakpoint="xs">Title</th>
            <th data-breakpoint="lg">Description</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>
        ...
    </tbody>
</table>

Via jsmartable class

Add the jsmartable class to your table to auto-initialize Jsmartable and configure each colunm to the specified breakpoint

<table class="table jsmartable">
    <thead>
        <tr>
            ...
        </tr>
    </thead>
    <tbody>
        ...
    </tbody>
</table>

Via JavaScript

// To style only selects with the my-custom-table class
 $('.my-custom-table').jsmartable();

or

// To style all table
 $('table').jsmartable();

Options

Global Options

You can customize some options if you want, below list of the possible options :

allExpended : Boolean true or false allow to open all lines by default

breakpoint : array breakpoint: {
xs: int 480 by default,
sm: int 576 by default,
md: int 992 by default,
lg: int 1200 by default,
xlg: int 1400 by default,
} allow to change the breakpoint options

iconPlus: Code HTML, for exemple <i class="fas fa-plus text-info"></i> allow to change the plus icon

iconMinus : Code HTML, for exemple <i class="fas fa-minus text-info"></i> allow to change the minus icon

// To style only selects with the my-custom-table class
$('.my-custom-table').jsmartable(
    breakpoint: {
        xs: 480,
        sm: 576,
        md: 992,
        lg: 1200,
        xlg: 1400,
    },
    iconPlus: '<i class="fas fa-plus text-info"></i>',
    iconMinus: '<i class="fas fa-minus text-info"></i>',
    allExpended: false
);

Rows Options

You can also open only some rows by default, for example the first row

    <thead>
        <tr>
            ...
        </tr>
    </thead>
    <tbody>
        <tr data-opened="true">
            ...
        </tr>
            ...
    </tbody>
</table>

Columns Options

You can override the default title from the th column by a custom value. To do that, see below :

    <thead>
        <tr>
            ...
        </tr>
    </thead>
    <tbody>
        <tr>
            <td data-title="Rewrite title 1"></td>
            <td></td>
            <td data-title="Rewrite title "></td>
            ...
        </tr>
            ...
    </tbody>
</table>