JSFiddle - React, Tailwind, and code Playground

by BeerusDev

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">
      <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/rowgroup/1.1.3/css/rowGroup.dataTables.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>
    <script type="text/javascript" src="https://cdn.datatables.net/rowgroup/1.1.3/js/dataTables.rowGroup.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>
              <li>
              <a href="#tab-table4" data-toggle="tab">Bithdays By Month</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">
               ...

CSS

.container {
  margin-top: 10px;
}

JavaScript

var data = [
{
	"Name": "Beerus Dev",
  "Birthday": "9/07/2021",
  "BirthdayThisMonth": "Yes",
  "BirthMonth":"September",
  "HireDate": "9/16/2021",
  "HireDateThisMonth": "Yes",
  "YearsWorkedHere": "2.0000",
  "Phone": "XXX-XXX-XXXX",
  "Extension": "ext#"
},
{
	"Name": "Krillin Dev",
  "Birthday": "9/11/2021",
  "BirthdayThisMonth": "Yes",
  "BirthMonth":"September",
  "HireDate": "9/13/2021",
  "HireDateThisMonth": "Yes",
  "YearsWorkedHere": "2",
  "Phone": "XXX-XXX-XXXX",
  "Extension": "ext#"
},
{
	"Name": "Goten Dev",
  "Birthday": "4/07/2021",
  "BirthdayThisMonth": "No",
  "BirthMonth":"April",
  "HireDate": "9/19/2021",
  "HireDateThisMonth": "Yes",
  "YearsWorkedHere": "2",
  "Phone": "XXX-XXX-XXXX",
  "Extension": "ext#"
},
{
	"Name": "Trunks Dev",
  "Birthday": "3/07/2021",
  "BirthdayThisMonth": "No",
  "BirthMonth":"March",
  "HireDate": "5/16/2021",
  "HireDateThisMonth": "No",
  "YearsWorkedHere": "2",
  "Phone": "XXX-XXX-XXXX",
  "Extension": "ext#"
},
{
	"Name": "MajinBuu Dev",
  "Birthday": "9/07/2021",
  "BirthdayThisMonth": "Yes",
  "BirthMonth":"September",
  "HireDate": "10/16/2021",
  "HireDateThisMonth": "No",
  "YearsWorkedHere": "2",
  "Phone": "XXX-XXX-XXXX",
  "Extension": "ext#"
},
{
	"Name": "Andorid Dev",
  "Birthday": "9/07/2021",
  "BirthdayThisMonth": "Yes",
  "BirthMonth":"September",
  "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...