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" );
});

‚Äč