Bootstrap 5 Data Table

Bootstrap 5 data tables display and interact with large datasets. This page covers 4 data table patterns — search filter, sortable, action buttons and pagination — each built with vanilla JavaScript and Bootstrap.

Quick Setup

Data tables need Bootstrap 5 CSS and JS:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

Key Classes Reference

Class	What It Does
`.table`	Base table class
`.table-hover`	Row highlight on hover
`.table-striped`	Alternating row colors
`.align-middle`	Vertically centers cell content
`.table-responsive`	Horizontal scroll on mobile
`.pagination`	Pagination nav component
`.page-item.active`	Highlights current page
`.page-item.disabled`	Disables prev/next at boundaries

1. Bootstrap 5 Table with Search Filter

A table with a live search input that filters rows as you type. Pure JavaScript, no library needed.

2. Bootstrap 5 Sortable Table

Click column headers to sort the table ascending or descending. Pure JavaScript sorting.

3. Bootstrap 5 Table with Action Buttons

Data table with edit, view and delete action buttons per row. Common in admin dashboards.

4. Bootstrap 5 Table with Pagination

Table with pagination controls. Shows rows per page and navigates between pages.

Frequently Asked Questions

How do I add sorting to a Bootstrap 5 table without a library?▲

Get all tbody rows as an array, sort them by the clicked column's cell text content, then re-append them to tbody. For numbers parse as float before comparing. Track sort direction in an object keyed by column index and toggle on each click.

How do I add pagination to a Bootstrap 5 table?▼

Split rows into pages of N items. Show only the current page's rows using row.style.display. Update Bootstrap's pagination component active state and disable prev/next at boundaries. Recalculate on page change and rows-per-page change.

How do I export a Bootstrap 5 table to CSV?▼

Loop through table rows building a CSV string: rows.forEach(row => csv += [...row.cells].map(c => c.textContent).join(',') + ' '). Create a Blob with type text/csv and trigger download: const a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = 'data.csv'; a.click().

Should I use a library for Bootstrap 5 data tables?▼

For basic search, sort and pagination vanilla JavaScript is fine. For advanced features like server-side pagination, column reordering, export to Excel, and complex filtering consider DataTables.js which has Bootstrap 5 styling support. Tabulator is another good option with no jQuery dependency.

How do I highlight a row when selected in Bootstrap 5 table?▼

Toggle a class on row click: row.addEventListener('click', function() { this.classList.toggle('table-primary'); }). For single selection remove the class from all rows first: rows.forEach(r => r.classList.remove('table-primary')); then add to the clicked row.

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 →

Bootstrap 5 Data Table

Quick Setup

Key Classes Reference

1. Bootstrap 5 Table with Search Filter

2. Bootstrap 5 Sortable Table

3. Bootstrap 5 Table with Action Buttons

4. Bootstrap 5 Table with Pagination

Frequently Asked Questions

Need a Full Bootstrap 5 Admin Dashboard?

Related Components

Bootstrap 5 Table Example

Bootstrap 5 Responsive Table

Angular Bootstrap Table