JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Bootstrap Table with Search Column Feature</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Varela+Round">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

  </head>

  <body>
    <div class="container-lg">
      <div class="table-responsive">
        <div class="table-wrapper">
          <div class="table-title">
            <div class="row">
              <div class="col-sm-6">
                <h2>Customer <b>Details</b></h2>
              </div>
              <div class="col-sm-6">
                <div class="search-box">
                  <div class="input-group">
                    <input type='text' id='txt_searchall' placeholder='Enter search text'>&nbsp;
                    <input type='text' id='txt_name' placeholder='Enter search name'>
                    <br /> </div>
                </div>
              </div>
            </div>
          </div>
          <table class="table table-sm myTable" id="tabledetails">
            <thead>
              <tr class="header" style="background-color: #0080ff;color: white;border-color:white;text-align:center;">
                <th style="width:80px;font-size:11px;border-bottom:solid 2px black;">Machine Code
                  <br>
                  [Machine...

CSS

* {
  box-sizing: border-box;
}

.notfound {
  display: none;
}

body {
  color: #566787;
  background: #f7f5f2;
  font-family: 'Roboto', sans-serif;
}

.table-responsive {
  margin: 30px 0;
}

.table-wrapper {
  min-width: 1000px;
  background: #fff;
  padding: 20px 25px;
  border-radius: 3px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}

JavaScript

$(document).ready(function() {

  // Search all columns
  $('#txt_searchall').keyup(function() {
    // Search Text
    var search = $(this).val();

    // Hide all table tbody rows
    $('table tbody tr').hide();

    // Count total search result
    var len = $('table tbody tr:not(.notfound) td:contains("' + search + '")').length;

    if (len > 0) {
      // Searching text in columns and show match row
      $('table tbody tr:not(.notfound) td:contains("' + search + '")').each(function() {
        $(this).closest('tr').show();
      });
    } else {
      $('.notfound').show();
    }

  });

  // Search on name column only
  $('#txt_name').keyup(function() {
    // Search Text
    var search = $(this).val();

    // Hide all table tbody rows
    $('table tbody tr').hide();

    // Count total search result
    var len = $('table tbody tr:not(.notfound) td:nth-child(1):contains("' + search + '")').length;

    if (len > 0) {
      // Searching text in columns and show match row
      $('table tbody tr:not(.notfound) td:contains("' + search + '")').each(function() {
        $(this).closest('tr').show();
      });
    } else {
      $('.notfound').show();
    }

  });

});

// Case-insensitive searching (Note - remove the below script for Case sensitive search )
$.expr[":"].contains = $.expr.createPseudo(function(arg) {
  return function(elem) {
    return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
  };
});