Minimal Table Sorter & Filter In jQuery - Auto Tables

An easy-to-use jQuery plugin for data-rich HTML tables that makes it possible to sort table elements by each column and search/filter table rows based on search keywords.

See Also:

• 10 Best Table Pagination Plugins
• 10 Best Data Table/Grid Systems In JavaScript
• 10 Best Responsive Table Plugins In JavaScript And CSS
• 10 Best JavaScript Plugins To Sort Table By Columns

How to use it:

1. Add both jQuery JavaScript library and the auto-tables.js script to the HTML page.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/auto-tables.js"></script>

2. Add the 'tablesort' to the target HTML table to make it sortable. Don't forget to determine the sort type for each column using data-tablesort-type attributes as follows:

<table class="tablesort" id="datatable">
  <thead>
    <tr>
    <th data-tablesort-type="int">Index</th>
    <th data-tablesort-type="string">Email</th>
    <th data-tablesort-type="date">Dob</th>
    </tr>
  </thead>
  <tbody>
    Table Cells Here
  </tbody>
</table>

3. Create a search field to filter through the data table.

<input type="text" 
       class="tablesearch-input" 
       data-tablesearch-table="#datatable"
/>

Changelog:

2021-04-27

• Improvements to default sort and fallback for all searchable cells

---

This awesome jQuery plugin is developed by rrickgauer. For more Advanced Usages, please check the demo page or visit the official website.