Responsive Table (tablesaw)

Introduction

In tablesaw Swipe Mode, ModeSwitch, Minimap, Sortable, SortableSwitch modes are available.

How to Setup

HTML Structure

<table class="table tablesaw table-bordered table-hover  mb-0" data-tablesaw-mode="swipe" data-tablesaw-sortable data-tablesaw-sortable-switch data-tablesaw-minimap data-tablesaw-mode-switch>
<thead>
    <tr>
        <th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="persist">Movie</th>
        <th scope="col" data-tablesaw-sortable-col data-tablesaw-sortable-default-col data-tablesaw-priority="3">Rank</th>
        <th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="2">Year</th>
        <th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="1"><abbr title="Rotten Tomato Rating">Rating</abbr></th>
        <th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="4">Gross</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td class="title"><a href="javascript:void(0)">Avatar</a></td>
        <td>1</td>
        <td>2009</td>
        <td>83%</td>
        <td>$2.7B</td>
    </tr>
    ....
    <tr>
        <td class="title"><a href="javascript:void(0)">The Lord of the Rings: The Return of the King</a></td>
        <td>8</td>
        <td>2003</td>
        <td>95%</td>
        <td>$1.1B</td>
    </tr>
    <tr>
        <td class="title"><a href="javascript:void(0)">Skyfall</a></td>
        <td>9</td>
        <td>2012</td>
        <td>92%</td>
        <td>$1.1B</td>
    </tr>
    <tr>
        <td class="title"><a href="javascript:void(0)">Transformers: Age of Extinction</a></td>
        <td>10</td>
        <td>2014</td>
        <td>18%</td>
        <td>$1.0B</td>
    </tr>
</tbody>
</table>

Dependency

CSS

<!-- Tablesaw table CSS -->
<link href="vendors/tablesaw/dist/tablesaw.css" rel="stylesheet" type="text/css" />

JS

<!-- Tablesaw JavaScript -->
<script src="vendors/tablesaw/dist/tablesaw.jquery.js"></script>
<script src="dist/js/tablesaw-data.js"></script>

Initialize Tablesaw JS

$( function(){
    $( document ).trigger( "enhance.tablesaw" );
});