> For the complete documentation index, see [llms.txt](https://hencework.gitbook.io/pangong/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://hencework.gitbook.io/pangong/tables/responsive-table-tablesaw.md).

# Responsive Table (tablesaw)

## Introduction

 In [tablesaw](https://github.com/filamentgroup/tablesaw) Swipe Mode, ModeSwitch, Minimap, Sortable, SortableSwitch modes are available.

## How to Setup

### **HTML Structure**

```markup
<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

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

### JS

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

### Initialize Tablesaw  JS

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