JSmartable

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

<!-- Latest compiled and minified Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<!-- Latest compiled and minified fontawesome CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.css">

<!-- Latest compiled and minified Jquery -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
                
<!-- Latest compiled and minified Bootstrap -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
                
<!-- JSmartable -->
<script src="//path/jsmartable.min.js"></script>

            

Example

Below a simple example from a basic table that contain a thead section and a tbody section.

ID	1 Column	2 Column	3 Column	4 Column	Lastname	Firstname	Title	Description	Action
Alii	summum	decus	in	carruchis	solito	altioribus	et	ambitioso	vestium
cultu	ponentes	sudant	sub	ponderibus	lacernarum	collis	in	insertas	cingulis
multiformes	species	liciorum	luceant	perspicue	tunicaeque	fimbriae	ut	longiores	maximeque
ipsis	adnectunt	nimia	effigiatae	tenuitate	expandentes	crebris	eas	agitationibus	sinistra

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 :

Option Name	Possible value	Description
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 data-opened="true">
                <td data-title="Rewrite title"></td>
                <td ></td>
                <td data-title="Rewrite title 2"></td>
                ...
            </tr>
                ...
        </tbody>
    </table>