JSFiddle - React, Tailwind, and code Playground

by andrey90vs

HTML

<input class="search-table" />
<div class="result">S-au gasit: <span></span></div>
<table class="table_default">
    <tr>
        <th>
            <div class="desktop_show">Rank</div>
            <div class="mobile_show">RK</div>
        </th>
        <th>Name</th>
        <th>Dealer</th>
        <th>
            <div class="desktop_show">Zone-District</div>
            <div class="mobile_show">Zn/Dst</div>
        </th>
    </tr>
    <tr>
        <td>1</td>
        <td>David Copperfield</td>
        <td>Norm Reeves Superstore</td>
        <td>1-B</td>
    </tr>
    <tr>
        <td>2</td>
        <td>David Copperfield</td>
        <td>Norm Reeves Superstore</td>
        <td>1-B</td>
    </tr>
    <tr>
        <td>3</td>
        <td>David Copperfield</td>
        <td>Norm Reeves Superstore</td>
        <td>1-B</td>
    </tr>
    <tr>
        <td>4</td>
        <td>David Copperfield</td>
        <td>Norm Reeves Superstore</td>
        <td>1-B</td>
    </tr>
    <tr>
        <td>5</td>
        <td>David Copperfield</td>
        <td>Norm Reeves Superstore</td>
        <td>1-B</td>
    </tr>
    <tr>
        <td>6</td>
        <td>David Copperfield</td>
        <td>Norm Reeves Superstore</td>
        <td>1-B</td>
    </tr>
    <tr>
        <td>7</td>
        <td>David Copperfield</td>
        <td>Norm Reeves Superstore</td>
        <td>1-B</td>
    </tr>
    <tr>
        <td>8</td>
        <td>David Copperfield</td>
        <td>Norm Reeves Superstore</td>
        <td>1-B</td>
    </tr>
    <tr>
        <td>9</td>
        <td>David Copperfield</td>
        <td>Norm Reeves Superstore</td>
        <td>1-B</td>
    </tr>
    <tr>
        <td>10</td>
        <td>David Copperfield</td>
        <td>Norm Reeves Superstore</td>
        <td>1-B</td>
    </tr>
    <tr>
        <td>11</td>
        <td>David Copperfield</td>
        <td>Norm Reeves Superstore</td>
        <td>1-B</td>
    </tr>
    <tr>
        <td>12</td>
        <td>David Copperfield</td>
        <td>Norm...

SCSS

.table_default {
	color: #fff;
	font-size: 20px;
	width: 100%;

	.mobile_show {
		display: none;
	}

	tr {
		background-color: rgb(74, 155, 202);
		border-bottom: 1px solid rgb(87, 161, 204);

		td,
		th {
			text-align: center;
			border-right: 1px solid #fff;
			padding: 35px 0;
			vertical-align: middle;

			&:last-child {
				border-right: none;
			}
		}

		&:first-child {
			background-color: rgb(38, 101, 154);

			th:first-child{
				border-top-left-radius: 10px;
			}

			th:last-child{
				border-top-right-radius: 10px;
			}
		}

		&:last-child {
			border-bottom: none;

			td:first-child{
				border-bottom-left-radius: 10px;
			}

			td:last-child{
				border-bottom-right-radius: 10px;
			}
		}
	}

	.row_green {
		background-color: #86c900;
	}

	.row_yellow {
		background-color: #c9c700;
	}
}

JavaScript

'use strict';
$(document).ready(function(){
    $('.search-table').keyup(function(){
		var _this = this;
        var table = $('.table_default');
        
        $.each($(table).find('tr').not('tr:first-child'), function() {
 if($(this).text().toLowerCase().indexOf($(_this).val().toLowerCase()) == -1){
                $(this).hide();
            } else {
                $(this).show();
                $('.result span').html($(this).length);
                console.log($(this).length);
            }
        });
    }); 
});