JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<head>
<!--Stylesheets-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.2/css/dataTables.bootstrap.min.css">
<!--Scripts-->
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.11.2/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.11.2/js/dataTables.bootstrap.min.js"></script>
</head>
</html>
<div class="container">
<ul class="nav nav-tabs" role="tablist">
<li class="active">
<a href="#tab-table1" data-toggle="tab">Birthdays</a>
</li>
<li>
<a href="#tab-table2" data-toggle="tab">Anniversaries</a>
</li>
<li>
<a href="#tab-table3" data-toggle="tab">Contact Information</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab-table1">
<table id="myTable1" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Birthday</th>
<th>Birthday This Month</th>
</tr>
</thead>
</table>
</div>
<div class="tab-pane" id="tab-table2">
<table id="myTable2" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Hire Date</th>
<th>Hired This Month</th>
<th>Years Worked Here</th>
...
CSS
.container {
margin-top: 10px;
}
JavaScript
var data = [
{
"Name": "Beerus Dev",
"Birthday": "9/07/2021",
"BirthdayThisMonth": "Yes",
"HireDate": "9/16/2021",
"HireDateThisMonth": "Yes",
"YearsWorkedHere": "2",
"Phone": "XXX-XXX-XXXX",
"Extension": "ext#"
},
{
"Name": "Krillin Dev",
"Birthday": "9/11/2021",
"BirthdayThisMonth": "Yes",
"HireDate": "9/13/2021",
"HireDateThisMonth": "Yes",
"YearsWorkedHere": "2",
"Phone": "XXX-XXX-XXXX",
"Extension": "ext#"
},
{
"Name": "Goten Dev",
"Birthday": "4/07/2021",
"BirthdayThisMonth": "No",
"HireDate": "9/19/2021",
"HireDateThisMonth": "Yes",
"YearsWorkedHere": "2",
"Phone": "XXX-XXX-XXXX",
"Extension": "ext#"
},
{
"Name": "Trunks Dev",
"Birthday": "3/07/2021",
"BirthdayThisMonth": "No",
"HireDate": "5/16/2021",
"HireDateThisMonth": "No",
"YearsWorkedHere": "2",
"Phone": "XXX-XXX-XXXX",
"Extension": "ext#"
},
{
"Name": "MajinBuu Dev",
"Birthday": "9/07/2021",
"BirthdayThisMonth": "Yes",
"HireDate": "10/16/2021",
"HireDateThisMonth": "No",
"YearsWorkedHere": "2",
"Phone": "XXX-XXX-XXXX",
"Extension": "ext#"
},
{
"Name": "Andorid Dev",
"Birthday": "9/07/2021",
"BirthdayThisMonth": "Yes",
"HireDate": "9/16/2021",
"HireDateThisMonth": "Yes",
"YearsWorkedHere": "2",
"Phone": "XXX-XXX-XXXX",
"Extension": "ext#"
}
];
$(document).ready(function(){
$.fn.dataTable.ext.search.push(
function( settings,searchData, data, dataIndex ) {
var bdayBool = searchData[2];
var hireBool = searchData[2];
if ( settings.sTableId === 'myTable1' ) {
if(bdayBool === "Yes"){
return true;
} else {
return false;
}
}
if ( settings.sTableId === 'myTable2' ) {
if(hireBool === "Yes"){
return true;
} else {
return false;
}
}
return true;
});
var table = $('#myTable1').DataTable({
data: data,
paging: false,
"columns": [
{ "data": "Name",
"width": "33%"...