"Table sorter - basic sort - column sorting"
Bootstrap 4.0.0 Snippet by gabycampagna

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <head> <link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <link href="https://www.jqueryscript.net/demo/jQuery-Plugin-For-Sortable-Bootstrap-Tables-Bootstrap-Sortable/Contents/bootstrap-sortable.css" rel="stylesheet" type="text/css"> <style> body { background-color:#fafafa;} .container { margin:150px auto;} </style> </head> <body> <div id="jquery-script-menu"> <div class="jquery-script-center"> <ul> <li><a href="https://www.jqueryscript.net/table/jQuery-Plugin-For-Sortable-Bootstrap-Tables-Bootstrap-Sortable.html">Download This Plugin</a></li> <li><a href="https://www.jqueryscript.net/">Back To jQueryScript.Net</a></li> </ul> <div class="jquery-script-ads"><script type="text/javascript"><!-- google_ad_client = "ca-pub-2783044520727903"; /* jQuery_demo */ google_ad_slot = "2780937993"; google_ad_width = 728; google_ad_height = 90; //--> </script> <script type="text/javascript" src="https://pagead2.googlesyndication.com/pagead/show_ads.js"> </script></div> <div class="jquery-script-clear"></div> </div> </div> <div class="container"> <h1 class="text-center">jQuery Bootstrap Sortable Plugin Demos</h1> <table class="table table-bordered table-striped sortable"> <caption> Optional table caption. </caption> <thead> <tr> <th data-defaultsign="_19">#</th> <th data-defaultsign="AZ">First Name</th> <th>Last Name</th> <th data-defaultsign="month">Birthday</th> </tr> </thead> <tbody> <tr> <td data-value="1">1</th> <td>Mark</td> <td>Otto</td> <td data-dateformat="MM-DD-YYYY">11-11-1970</td> </tr> <tr> <td data-value="2">2</th> <td>Jacob</td> <td>Thornton</td> <td data-dateformat="MM-DD-YYYY">11-11-1980</td> </tr> <tr> <td data-value="3">3</th> <td>Larry</td> <td>the Bird</td> <td data-dateformat="MM-DD-YYYY">11-11-1960</td> </tr> </tbody> </table> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script> <script src="https://www.jqueryscript.net/demo/jQuery-Plugin-For-Sortable-Bootstrap-Tables-Bootstrap-Sortable/Scripts/bootstrap-sortable.js"></script> </div> </body>

Related: See More

Vuetify Material Dashboard
Bootstrap Tabs with Table
Creative Princing Table
BS4 Simple & Clean Pricing table

Questions / Comments: