Bootstrap DataTable Responsive with Examples

Bootstrap DataTable Responsive

If you've ever worked with tables in web development, you know how challenging it can be to make them look good on all devices, especially on smaller screens like smartphones. That's where Bootstrap and DataTables come to the rescue! In this article, we'll explore how to create a responsive DataTable using Bootstrap, and I'll explain everything in a simple, friendly way so you can follow along easily. Let's dive in!

What is Bootstrap?

Bootstrap is a popular front-end framework that makes it easy to design responsive and mobile-friendly websites. It provides pre-built CSS and JavaScript components, like buttons, forms, and tables, that you can use to create beautiful layouts without starting from scratch.

What is DataTables?

DataTables is a powerful jQuery plugin that adds advanced features to HTML tables, such as sorting, searching, pagination, and more. When combined with Bootstrap, it creates a seamless and professional-looking table that works perfectly on all devices.

Why Make DataTables Responsive?

Responsive design ensures that your table looks great on any screen size. Without responsiveness, tables can overflow or become unreadable on smaller devices. By making your DataTable responsive, you ensure that users can easily scroll, sort, and search through your data, no matter what device they're using.

How to Create a Responsive Bootstrap DataTable

Let's walk through the steps to create a responsive DataTable using Bootstrap and DataTables. I'll provide examples and explain each step in detail.

Step 1: Set Up Your HTML File

First, create a basic HTML file and include the necessary Bootstrap and DataTables libraries. You can use CDN links to quickly add these libraries to your project.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Bootstrap DataTable</title>
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- DataTables CSS -->
  <link href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css" rel="stylesheet">
</head>
<body>
  <div class="container mt-5">
    <h2 class="text-center">Responsive Bootstrap DataTable</h2>
    <table id="example" class="table table-striped table-bordered" style="width:100%">
      <thead>
        <tr>
          <th>Name</th>
          <th>Position</th>
          <th>Office</th>
          <th>Age</th>
          <th>Start Date</th>
          <th>Salary</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Tiger Nixon</td>
          <td>System Architect</td>
          <td>Edinburgh</td>
          <td>61</td>
          <td>2011/04/25</td>
          <td>$320,800</td>
        </tr>
        <!-- Add more rows here -->
      </tbody>
    </table>
  </div>

  <!-- jQuery -->
  <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
  <!-- DataTables JS -->
  <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  <!-- DataTables Bootstrap JS -->
  <script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>

  <script>
    $(document).ready(function() {
      $('example').DataTable({
        responsive: true // Enable responsiveness
      });
    });
  </script>
</body>
</html>

Step 2: Add Data to Your Table

In the example above, I've added a simple table with some sample data. You can add as many rows as you need. The thead section defines the column headers, and the tbody section contains the data rows.

Step 3: Initialize DataTable with Responsive Feature

To make the table responsive, we use the responsive: true option when initializing the DataTable. This ensures that the table adjusts its layout based on the screen size.

$(document).ready(function() {
  $('example').DataTable({
        responsive: true // Enable responsiveness
        paging: true, // Enable pagination
        searching: true, // Enable search bar
        ordering: true, // Enable column sorting
        info: true // Show table information
  });
});

Step 4: Test Responsiveness

Now, open your HTML file in a browser and resize the window. You'll notice that the table automatically adjusts to fit the screen size. On smaller screens, the table will become scrollable horizontally, and some columns may collapse into a dropdown menu for better readability.

Customizing Your Responsive DataTable

DataTables provides many options to customize your table. Here are a few examples:

Add Buttons for Exporting Data

You can add buttons to export your table data as CSV, Excel, or PDF.

<!-- jQuery -->
  <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <!-- DataTables JS -->
  <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
  
  <!-- DataTables Bootstrap JS -->
  <script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>
  
  <!-- DataTables Responsive JS -->
  <script src="https://cdn.datatables.net/responsive/2.5.0/js/dataTables.responsive.min.js"></script>
  <script src="https://cdn.datatables.net/responsive/2.5.0/js/responsive.bootstrap5.min.js"></script>
  
  <!-- DataTables Buttons JS -->
  <script src="https://cdn.datatables.net/buttons/2.4.1/js/dataTables.buttons.min.js"></script>
  <script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.bootstrap5.min.js"></script>
  
  <!-- Buttons export JS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
  <script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.html5.min.js"></script>
  <script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.print.min.js"></script>
  <script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.colVis.min.js"></script>

$(document).ready(function() {
  $('example').DataTable({
        responsive: true, // Enable responsiveness
        paging: true, // Enable pagination
        searching: true, // Enable search bar
        ordering: true, // Enable column sorting
        info: true, // Show table information
        dom: 'Bfrtip',
        buttons: [
          'copy', 'csv', 'excel', 'pdf', 'print'
        ]
  });
});

Conclusion

Creating a responsive Bootstrap DataTable is a breeze when you combine the power of Bootstrap and DataTables. With just a few lines of code, you can create a professional-looking table that works seamlessly on all devices. Whether you're building a dashboard, a report, or any data-heavy application, this approach will save you time and ensure a great user experience.

Feel free to experiment with the examples provided and customize your table to suit your needs. Happy coding! 🚀

Bootstrap DataTable Responsive with Examples