Sortable Tabular Data using tablesorter

Tables Bootstrap 5Free+ CSS+ JS

Free Bootstrap 5 table snippet — Sortable Tabular Data using tablesorter. Preview, copy HTML, CSS & JS, drop it into any Bootstrap 5 project.

1.8k views29 downloads5 years ago

gosnippets.com/preview/sortable-tabular-data-using-tablesorter

Source Code

1<div id="wrapper">
2  <h1>Sortable Table of Search Queries</h1>
3  
4  <table id="keywords" cellspacing="0" cellpadding="0">
5    <thead>
6      <tr>
7        <th><span>Keywords</span></th>
8        <th><span>Impressions</span></th>
9        <th><span>Clicks</span></th>
10        <th><span>CTR</span></th>
11        <th><span>Rank</span></th>
12      </tr>
13    </thead>
14    <tbody>
15      <tr>
16        <td class="lalign">silly tshirts</td>
17        <td>6,000</td>
18        <td>110</td>
19        <td>1.8%</td>
20        <td>22.2</td>
21      </tr>
22      <tr>
23        <td class="lalign">desktop workspace photos</td>
24        <td>2,200</td>
25        <td>500</td>
26        <td>22%</td>
27        <td>8.9</td>
28      </tr>
29      <tr>
30        <td class="lalign">arrested development quotes</td>
31        <td>13,500</td>
32        <td>900</td>
33        <td>6.7%</td>
34        <td>12.0</td>
35      </tr>
36      <tr>
37        <td class="lalign">popular web series</td>
38        <td>8,700</td>
39        <td>350</td>
40        <td>4%</td>
41        <td>7.0</td>
42      </tr>
43      <tr>
44        <td class="lalign">2013 webapps</td>
45        <td>9,900</td>
46        <td>460</td>
47        <td>4.6%</td>
48        <td>11.5</td>
49      </tr>
50      <tr>
51        <td class="lalign">ring bananaphone</td>
52        <td>10,500</td>
53        <td>748</td>
54        <td>7.1%</td>
55        <td>17.3</td>
56      </tr>
57    </tbody>
58  </table>
59 </div> 
60 <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
61<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.28.14/js/jquery.tablesorter.min.js'></script>

More Tables snippets

Bootstrap 5 Meeting status table with user info snippet

Add a table to your UI with Bootstrap 5 Meeting status table with user info snippet. Free Bootstrap 5 code — HTML & CSS ready to copy, MIT licensed.

TablesView →

Comments(0)

No comments yet — be the first to start the discussion.

1<div id="wrapper"> 2 <h1>Sortable Table of Search Queries</h1> 3 4 <table id="keywords" cellspacing="0" cellpadding="0"> 5 <thead> 6 <tr> 7 <th><span>Keywords</span></th> 8 <th><span>Impressions</span></th> 9 <th><span>Clicks</span></th> 10 <th><span>CTR</span></th> 11 <th><span>Rank</span></th> 12 </tr> 13 </thead> 14 <tbody> 15 <tr> 16 <td class="lalign">silly tshirts</td> 17 <td>6,000</td> 18 <td>110</td> 19 <td>1.8%</td> 20 <td>22.2</td> 21 </tr> 22 <tr> 23 <td class="lalign">desktop workspace photos</td> 24 <td>2,200</td> 25 <td>500</td> 26 <td>22%</td> 27 <td>8.9</td> 28 </tr> 29 <tr> 30 <td class="lalign">arrested development quotes</td> 31 <td>13,500</td> 32 <td>900</td> 33 <td>6.7%</td> 34 <td>12.0</td> 35 </tr> 36 <tr> 37 <td class="lalign">popular web series</td> 38 <td>8,700</td> 39 <td>350</td> 40 <td>4%</td> 41 <td>7.0</td> 42 </tr> 43 <tr> 44 <td class="lalign">2013 webapps</td> 45 <td>9,900</td> 46 <td>460</td> 47 <td>4.6%</td> 48 <td>11.5</td> 49 </tr> 50 <tr> 51 <td class="lalign">ring bananaphone</td> 52 <td>10,500</td> 53 <td>748</td> 54 <td>7.1%</td> 55 <td>17.3</td> 56 </tr> 57 </tbody> 58 </table> 59 </div> 60 <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> 61<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.28.14/js/jquery.tablesorter.min.js'></script>