Bootstrap 4 Data table

In this article, we will understand about a Bootstrap 4 data table.

What do you mean by Bootstrap4 Data table?

In Bootstrap 4, Data Tables can integrate easily with Bootstrap's table styling options to present an interface with a uniform design, based on Bootstrap, for your website. It provides JavaScript validation and cascading style sheet design without any configuration. It includes searching, sorting, and paging of the table without any complicated coding.

Let's take the examples of the Bootstrap 4 Data table.

Example1:

<! DOCTYPE html>
<html lang="en">
<head>
  <title> Bootstrap 4 Footer with Social icons </title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"> </script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"> </script>
  <link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css"> 
  <script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"> </script>
   <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" >
</head>
<style>
body {
  min-height: 100vh;
 background-color: #FFE53B;
  background-image: linear-gradient(147deg, #FFE53B 0%, #FF2525 100%);
}
.table {
  border-spacing: 0 0.85rem !important;
}
.table .dropdown {
  display: inline-block;
}
.table td
{
  vertical-align: middle;
  margin-bottom: 10px;
  border: none;
}
.table th {
  vertical-align: middle;
  margin-bottom: 10px;
  border: none;
}
.table thead tr {
  border: none;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: transparent;
}
.table thead th {
  border: none;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: transparent;
}
.table td {
  background: #fff;
}
.table td:first-child {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
.table td:last-child {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}
.avatar {
  width: 2.75rem;
  height: 2.75rem;
  line-height: 3rem;
  border-radius: 50%;
  display: inline-block;
  background: transparent;
  position: relative;
  text-align: center;
  color: #868e96;
  font-weight: 700;
  vertical-align: bottom;
  font-size: 1rem;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.avatar-sm {
  width: 2.5rem;
  height: 2.5rem;
  font-size: 0.83333rem;
  line-height: 1.5;
}
.avatar-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.avatar-blue {
  background-color: #c8d9f1;
  color: #467fcf;
}
table.dataTable.dtr-inline.collapsed
  > tbody
  > tr[role="row"]
  > td:first-child:before,
table.dataTable.dtr-inline.collapsed
  > tbody
  > tr[role="row"]
  > th:first-child:before {
  top: 28px;
  left: 14px;
  border: none;
  box-shadow: none;
}
table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > td:first-child
{
  padding-left: 48px;
}
table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > th:first-child {
  padding-left: 48px;
}
table.dataTable > tbody > tr.child ul.dtr-details {
  width: 100%;
}
table.dataTable > tbody > tr.child span.dtr-title {
  min-width: 50%;
}
table.dataTable.dtr-inline.collapsed > tbody > tr > td.child,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.child,
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dataTables_empty {
  padding: 0.75rem 1rem 0.125rem;
}
div.dataTables_wrapper div.dataTables_length label,
div.dataTables_wrapper div.dataTables_filter label {
  margin-bottom: 0;
}

@media (max-width: 767px) {
  div.dataTables_wrapper div.dataTables_paginate ul.pagination {
    -ms-flex-pack: center !important;
    justify-content: center !important;
    margin-top: 1rem;
  }
}
.btn-icon {
  background: #fff;
}
.btn-icon .bx {
  font-size: 20px;
}
.btn .bx {
  vertical-align: middle;
  font-size: 20px;
}
.dropdown-menu {
  padding: 0.25rem 0;
}
.dropdown-item {
  padding: 0.5rem 1rem;
}
.badge {
  padding: 0.5em 0.75em;
}
.badge-success-alt {
  background-color: #d7f2c2;
  color: #7bd235;
}
.table a {
  color: #212529;
}
.table a:hover,
.table a:focus {
  text-decoration: none;
}
table.dataTable {
  margin-top: 12px !important;
}
.icon > .bx {
  display: block;
  min-width: 1.5em;
  min-height: 1.5em;
  text-align: center;
  font-size: 1.0625rem;
}
.btn {
  font-size: 0.9375rem;
  font-weight: 500;
  padding: 0.5rem 0.75rem;
}
.avatar-blue {
      background-color: #c8d9f1;
      color: #467fcf;
    }
    .avatar-pink {
      background-color: #fcd3e1;
      color: #f66d9b;
    }
</style>
<body>
<div class="container">
  <div class="row py-5">
    <div class="col-12">
      <table id="example" class="table table-hover responsive nowrap" style="width:100%">
        <thead>
		<h2> Bootstrap4 DataTable Example </h2>
          <tr>
            <th>Client Name</th>
            <th>Phone Number</th>
            <th>Profession</th>
            <th>Date of Birth</th>
            <th>App Access</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              <a href="#">
                <div class="d-flex align-items-center">
                  <div class="avatar avatar-blue mr-3">EB</div>

                  <div class="">
                    <p class="font-weight-bold mb-0"> Ram </p>
                    <p class="text-muted mb-0">ram@example.com</p>
                  </div>
                </div>
              </a>
            </td>
            <td>(784) 667 8768</td>
            <td>Designer</td>
            <td>09/04/1996</td>
            <td>
              <div class="badge badge-success badge-success-alt">Enabled</div>
            </td>
            <td>
              <div class="dropdown">
                <button class="btn btn-sm btn-icon" type="button" id="dropdownMenuButton2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      <i class="bx bx-dots-horizontal-rounded" data-toggle="tooltip" data-placement="top"
                        title="Actions"></i>
                    </button>
                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton2">
                  <a class="dropdown-item" href="#"><i class="bx bxs-pencil mr-2"></i> Edit Profile</a>
                  <a class="dropdown-item text-danger" href="#"><i class="bx bxs-trash mr-2"></i> Remove</a>
                </div>
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <a href="#">
                <div class="d-flex align-items-center">
                  <div class="avatar avatar-pink mr-3">JR</div>
                  <div class="">
                    <p class="font-weight-bold mb-0">Richa</p>
                    <p class="text-muted mb-0">richa_89@example.com</p>
                  </div>
                </div>
              </a>
            </td>
            <td> (937) 874 6878</td>
            <td> Banker</td>
            <td>13/01/1989</td>
            <td>
              <div class="badge badge-success badge-success-alt">Enabled</div>
            </td>
            <td>
              <div class="dropdown">
                <button class="btn btn-sm btn-icon" type="button" id="dropdownMenuButton2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      <i class="bx bx-dots-horizontal-rounded" data-toggle="tooltip" data-placement="top"
                        title="Actions"></i>
                    </button>
                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton2">
                  <a class="dropdown-item" href="#"><i class="bx bxs-pencil mr-2"></i> Edit Profile</a>
                  <a class="dropdown-item text-danger" href="#"><i class="bx bxs-trash mr-2"></i> Remove</a>
                </div>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
<div class="container text-center">
  <div class="row py-5">
    <div class="col-12">
		
    </div>
  </div>
</div>
<script>
$(document).ready(function() {
  $("#example").DataTable({
    aaSorting: [],
    responsive: true,
    columnDefs: [
      {
        responsivePriority: 1,
        targets: 0
      },
      {
        responsivePriority: 2,
        targets: -1
      }
    ]
  });
  $(".dataTables_filter input")
    .attr("placeholder", "Search here...")
    .css({
      width: "300px",
      display: "inline-block"
    });
  $('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
</html>

Explanation:

In the above example, we have created a data table with the help of bootstrap 4.

Output:

Following is the output of this example:

Example 2:

<! DOCTYPE html>
<html lang="en">
<head>
  <title> Bootstrap 4 datatable example </title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"> </script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"> </script>
  <link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css"> 
  <script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"> </script>
   <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" >
</head>
<style>
body {
  margin: 0;
    min-height: 100vh;
  padding: 0;
  background-color: var(--clr-light);
  color: var(--clr-black);
  font-family: 'Poppins', sans-serif;
  font-size: 1.125rem;
  justify-content: center;
  align-items: center;
}
h2 {
font-family: 'Indie Flower', cursive;
font-size: 32px;
  color: #03A9F4;
  font-weight: bold;
  text-align: center;
  padding: 20px 0;
}

table caption {
	padding: .5em 0;
}

table.dataTable th
{
  white-space: nowrap;
}
table.dataTable td {
  white-space: nowrap;
}
.p {
  text-align: center;
  padding-top: 140px;
  font-size: 14px;
}
</style>
<body>
<h2> Bootstrap4 DataTable Example </h2>

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <table summary="This table shows how to create responsive tables using Datatables' extended functionality" class="table table-bordered table-hover dt-responsive">
        <thead>
          <tr>
            <th> State </th>
            <th> Languages </th>
            <th> Population </th>
            <th> Median Age </th>
            <th> Area (Km?)</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td> Andhra Pradesh </td>
            <td> English, Hindi </td>
            <td> 41,803,125</td>
            <td> 31.3 </td>
            <td> 2,780,387 </td>
          </tr>
          <tr>
            <td> Himachal Pradesh </td>
            <td> English 79%, native and other languages </td>
            <td> 23,630,169 </td>
            <td> 37.3 </td>
            <td> 7,739,983 </td>
          </tr>
          <tr>
            <td> Gwalier </td>
            <td> Hindi </td>
            <td> 11,128,40 </td>
            <td> 43.2 </td>
            <td> 131,956 </td>
          </tr>
          <tr>
            <td> Ludhiana </td>
            <td> Panjabi </td>
              <td> 23,630,169 </td>
            <td> 37.3 </td>
            <td> 7,739,983 </td>
          </tr>
          <tr>
            <td> Goa </td>
            <td> native </td>
           <td> 41,803,125</td>
            <td> 31.3 </td>
            <td> 2,780,387 </td>
          </tr>
          <tr>
            <td> Mumbai </td>
            <td> Native </td>
           <td> 23,630,169 </td>
            <td> 37.3 </td>
            <td> 7,739,983 </td>
          </tr>
        </tbody>
        <tfoot>
        
     </tfoot>
      </table>
    </div>
  </div>
</div>
<script>
$('table').DataTable();
</script>
</body>
</html>

Explanation:

In the above example, we have created a data table with the help of bootstrap 4.

Output:

Following is the output of this example: