Bootstrap 5 sortable tables let users reorder rows by clicking column headers. All examples use pure vanilla JavaScript — no libraries needed.
Key Classes Reference
| Pattern | What It Does |
|---|---|
cursor:pointer | Shows hand cursor on sortable headers |
user-select:none | Prevents text selection on double-click |
Array.from(tbody.rows) | Gets rows as sortable array |
localeCompare | Sorts strings alphabetically |
tbody.appendChild(row) | Re-orders rows in DOM |
1. Bootstrap 5 Click-to-Sort Table
Click any column header to sort ascending or descending. Pure JavaScript, no library.
2. Bootstrap 5 Sortable Table with Styled Icons
Sortable table with colored sort direction indicators and active column highlight.
3. Bootstrap 5 Sortable Table with Search
Sortable table that also has a search input to filter rows in real time.
Frequently Asked Questions
Listen for clicks on th elements. Get all tbody rows as an array. Sort by comparing the text content of each row's cell at the clicked column index. Re-append sorted rows to tbody. Handle numeric vs string sorting by checking if Number(cellText) is NaN.
Strip non-numeric characters before comparing: const val = cell.textContent.replace(/[$,]/g, ''). Then parse as number: +val. Use this in the sort comparison function for numeric sorting of price, sales and other formatted number columns.
Add the click listener and cursor:pointer only to specific th elements. Use a data attribute to mark sortable columns: data-sortable='true'. In your JS: if(!th.dataset.sortable) return. This skips sorting for non-sortable columns like action buttons.
Need a Full Bootstrap 5 Admin Dashboard?
Get a complete Angular 21 + Bootstrap 5 dashboard with 50+ components — built by the same team behind BootstrapPlanet.
Browse Templates →Use code FIRST30 for 30% off your first purchase.