How to Create Data Tables with Bootstrap?

You can create simple tables using the HTML table tag. However, basic tables may not always be sufficient when displaying large datasets or adding advanced functionality. In many cases, you may need a feature-rich data table with capabilities like sorting, searching, pagination, responsive layout, and dynamic data filtering. One of the easiest ways to create advanced data tables is by using the jQuery plugin from DataTables.net. When combined with the Bootstrap framework, DataTables provides a clean, modern, and fully responsive design that seamlessly matches your website’s layout. Bootstrap styling also improves the overall appearance of tables with built-in responsiveness and consistent UI components.

The table shown below is built using the popular Bootstrap framework along with the DataTables plugin. In this tutorial, we will explain how to add this powerful table widget to your website using separate HTML, CSS, and JavaScript files, making it easier to customize and maintain.

Features of Data Table

The advanced data table widget will have the following features:

• Sortable based on any single column.
• Fully responsive made with Bootstrap.
• Filter the content with 10, 25, 50 and 100 records per page.
• Search box to search the content in any of the table cell.
• Stylish pagination for navigating to any page of the table with previous and next page option.
• Shows number of entries displayed along with total number of entries present in the table.

Download Complete Code

Download the complete code for the advanced data table widget. The ZIP archive contains the following files:

• advanced-table.html
• dataTables.bootstrap.css
• bootstrap.min.css
• jquery.min.js
• bootstrap.min.js
• dataTables.bootstrap.js
• jquery.dataTables.js

The advanced-table.html file contains the complete code required for the table. Simply open it in Chrome or any other web browser to preview the table with dummy data. For better organization, the CSS and JavaScript files are stored in separate CSS and JS folders, while the HTML file resides outside these asset folders. You can upload all the files to your server and open the HTML page to view the table. However, if you want to integrate the table into an existing webpage, you should follow a proper file structure and correctly link the CSS and JavaScript files in the HTML document based on your folder setup. Incorrect file paths may prevent the table from loading properly.

Note: If managing file structures and linking assets feels complicated, you may consider using website builders such as Weebly. They offer built-in options to insert custom CSS, JavaScript, and HTML code into your site’s header, footer, or body sections, allowing you to publish your content more easily.

Creating Advanced Data Table

There are three steps for creating and properly adding the data table widget in your site:

1. Adding CSS in Header

Add the following CSS to the header code section of your page:

<link rel="stylesheet" href="css/bootstrap.min.css">  
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/dataTables.bootstrap.css"/>
<style>
.table-responsive {
overflow-x: hidden;
}
@media (max-width: 800px) {
.table-responsive {
overflow-x: auto;
}
</style>

Here we have used the CDN link for connecting font awesome icons. If you host font awesome icons on your site, then you don’t need to add this link separately. Ensure to replace the “bootstrap.min.css” and “dataTables.bootstrap.css” links with the correct links from your site.

2. Adding Scripts

Add the below scripts to the footer code section of your page:

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.dataTables.js"></script>
<script src="js/dataTables.bootstrap.js"></script>
<script>
$(document).ready(function () {
$('#dataTables-example').dataTable();
});
</script>

We have used Google jQuery library with “jquery.min.js”. Remember that the widget will not work without this jQuery script. If your site uses jQuery by default, then you may not need to separately mention this link based on the versions.

3. Adding HTML

Add the below HTML code inside the body of your webpage. Some website builders like Wix and Weebly offer an embed code or custom HTML element for this purpose. In this example, we are creating a table with 5 columns and the code contains data for header and one row. You can copy / paste the row data to add as many rows to the table. Ensure to add all the cell values as well as header and rows are having same number of columns for the table to work properly. You can use hyphen (-) to indicate blank data.

<div class="panel-body">
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover" id="dataTables-example">
<!-- This is the header section of the table -->
<thead>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</thead>
<!-- End of table header -->
<tbody>
<!-- This is the start of first row of the table -->
<tr>
<td>Trident</td>
<td>Internet Explorer 4.0</td>
<td>Win 95+</td>
<td>4</td>
<td>X</td>
</tr>
<!-- End of first row (copy and paste this block to append additional rows -->
<!-- Paste additional rows here -->
</tbody>
</table>
</div>
</div>

4. Testing the Result

After inserting or uploading all required files, open the HTML page in a browser and test the functionalities. If there are too many entries, consider limiting the items per page (25 or 50) to offer a better user experience.

Final Words

Bootstrap works properly on a plain HTML page or on an existing website that already uses the Bootstrap framework. However, inserting a Bootstrap-based table into website builders or CMS platforms like WordPress may sometimes break the layout, as Bootstrap styles can conflict with your theme’s existing CSS. In such cases, consider creating data tables using plain JavaScript without including Bootstrap files to avoid styling conflicts. You can also check out our detailed guides on adding data tables to WordPress and Weebly platforms for a more compatible implementation approach.