Bootstrap 5 Simple Datatables Example

In this tutorial, we will create simple bootstrap 5 datatables, responsive bootstrap 5 datatables, bootstrap 5 datatables with hover able rows and dark color rows example in bootstrap 5.


Tool Use

Bootstrap 5 CDN

Jquery CDN

DataTables CDN


Example 1

Simple datatables with bootstrap 5

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Bootstrap 5 Simple Datatable Example</title>
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />
    <!-- bootstrap5 dataTables css cdn -->
    <link
      rel="stylesheet"
      href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap5.min.css"
    />
  </head>

  <body>
    <div class="container mt-4">
      <table
        id="datatable"
        class="table"
      >
        <thead>
          <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Email</th>
            <th>createdAt</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>Jhon doe</td>
            <td>[email protected]</td>
            <td>10/10/22</td>
          </tr>
          <tr>
            <td>2</td>
            <td>smae</td>
            <td>[email protected]</td>
            <td>10/11/22</td>
          </tr>
          <tr>
            <td>3</td>
            <td>Jhon doe3</td>
            <td>[email protected]</td>
            <td>10/10/22</td>
          </tr>
          <tr>
            <td>4</td>
            <td>Jhon doe4</td>
            <td>[email protected]</td>
            <td>10/10/24</td>
          </tr>
          <tr>
            <td>5</td>
            <td>Jhon doe5</td>
            <td>[email protected]</td>
            <td>10/10/21</td>
          </tr>
          
        </tbody>
      </table>
    </div>
    <!-- bootstrap5 dataTables js cdn -->
    <script src="https://cdn.datatables.net/1.11.3/js/dataTables.bootstrap5.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
    <script>
      $(document).ready(function () {
        $('#datatable').DataTable();
      });
    </script>
  </body>
</html>


Example 2 (recommended)

Responsive datatables with table-striped class

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Bootstrap 5 Simple Datatable Example</title>
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />
    <!-- bootstrap5 dataTables css cdn -->
    <link
      rel="stylesheet"
      href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap5.min.css"
    />
  </head>

  <body>
    <div class="container mt-4">
      <table
        id="datatable"
        class="table table-striped"
      >
        <thead>
          <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Email</th>
            <th>createdAt</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>Jhon doe</td>
            <td>[email protected]</td>
            <td>10/10/22</td>
          </tr>
          <tr>
            <td>2</td>
            <td>smae</td>
            <td>[email protected]</td>
            <td>10/11/22</td>
          </tr>
          <tr>
            <td>3</td>
            <td>Jhon doe3</td>
            <td>[email protected]</td>
            <td>10/10/22</td>
          </tr>
          <tr>
            <td>4</td>
            <td>Jhon doe4</td>
            <td>[email protected]</td>
            <td>10/10/24</td>
          </tr>
          <tr>
            <td>5</td>
            <td>Jhon doe5</td>
            <td>[email protected]</td>
            <td>10/10/21</td>
          </tr>
          
        </tbody>
      </table>
    </div>
    <!-- bootstrap5 dataTables js cdn -->
    <script src="https://cdn.datatables.net/1.11.3/js/dataTables.bootstrap5.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
    <script>
      $(document).ready(function () {
        $('#datatable').DataTable();
      });
    </script>
  </body>
</html>


Example 3

Bootstrap 5 dark black rows datatables

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Bootstrap 5 Black Color Datatable Example</title>
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />
    <!-- bootstrap5 dataTables css cdn -->
    <link
      rel="stylesheet"
      href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap5.min.css"
    />
  </head>

  <body>
    <div class="container mt-4">
      <table
        id="datatable"
        class="table table-dark table-striped"
      >
        <thead>
          <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Email</th>
            <th>createdAt</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>Jhon doe</td>
            <td>[email protected]</td>
            <td>10/10/22</td>
          </tr>
          <tr>
            <td>2</td>
            <td>smae</td>
            <td>[email protected]</td>
            <td>10/11/22</td>
          </tr>
          <tr>
            <td>3</td>
            <td>Jhon doe3</td>
            <td>[email protected]</td>
            <td>10/10/22</td>
          </tr>
          <tr>
            <td>4</td>
            <td>Jhon doe4</td>
            <td>[email protected]</td>
            <td>10/10/24</td>
          </tr>
          <tr>
            <td>5</td>
            <td>Jhon doe5</td>
            <td>[email protected]</td>
            <td>10/10/21</td>
          </tr>
          
        </tbody>
      </table>
    </div>
    <!-- bootstrap5 dataTables js cdn -->
    <script src="https://cdn.datatables.net/1.11.3/js/dataTables.bootstrap5.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
    <script>
      $(document).ready(function () {
        $('#datatable').DataTable();
      });
    </script>
  </body>
</html>


Example 4

Bootstrap 5 hover able rows datatables

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Bootstrap 5 Hoverable rows Datatable Example</title>
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />
    <!-- bootstrap5 dataTables css cdn -->
    <link
      rel="stylesheet"
      href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap5.min.css"
    />
  </head>

  <body>
    <div class="container mt-4">
      <table
        id="datatable"
        class="table table-dark table-hover table-striped"
      >
        <thead>
          <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Email</th>
            <th>createdAt</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>Jhon doe</td>
            <td>[email protected]</td>
            <td>10/10/22</td>
          </tr>
          <tr>
            <td>2</td>
            <td>smae</td>
            <td>[email protected]</td>
            <td>10/11/22</td>
          </tr>
          <tr>
            <td>3</td>
            <td>Jhon doe3</td>
            <td>[email protected]</td>
            <td>10/10/22</td>
          </tr>
          <tr>
            <td>4</td>
            <td>Jhon doe4</td>
            <td>[email protected]</td>
            <td>10/10/24</td>
          </tr>
          <tr>
            <td>5</td>
            <td>Jhon doe5</td>
            <td>[email protected]</td>
            <td>10/10/21</td>
          </tr>
          
        </tbody>
      </table>
    </div>
    <!-- bootstrap5 dataTables js cdn -->
    <script src="https://cdn.datatables.net/1.11.3/js/dataTables.bootstrap5.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
    <script>
      $(document).ready(function () {
        $('#datatable').DataTable();
      });
    </script>
  </body>
</html>