JSFiddle - React, Tailwind, and code Playground

by qunzorez

HTML

<div class="row">
        <div class="col-3"> <input class="form-control" type="text" id="search" placeholder="Search for ...""></div>

        <div class="col-2">
            <select class="form-control secondary-select" id="materialCode">
                <option></option>
                <option>16014344C</option>
                <option>16016398A</option>
                <option>16009838A</option>
            </select>
            <p><strong>Material Code</strong></p>
        </div>
        <div class="col-2">
            <select class="form-control secondary-select" id="plantCode">
                <option></option>
                <option>0119</option>
                <option>0379</option>
            </select>
            <p><strong>Plant Code</strong></p>
        </div>
        <div class="col-2">
            <select class="form-control secondary-select" id="vsCode">
                <option></option>
                <option>023</option>
                <option>0379</option>
            </select>
            <p><strong>Value Stream Code</strong></p>
        </div>
        <div class="col-2">
            <select class="form-control secondary-select" id="statusCode">
                <option></option>
                <option>BOOKED</option>
                <option>RELEASED</option>
            </select>
            <p><strong>Status</strong></p>
        </div>
        <div class="col-1">
            <button id="filterButton" class="button button-clear butt-heith">
               Apply filters
            </button>
        </div>
    </div>
    
      <button id="cancelFilters" class="button button-deactivate float-right">
        Cancel filters
    </button>

<table class="table-editor" id="ordersList">
        <thead>
            <tr>
                <th>Production order code</th>
                <th>Material code</th>
                <th>Target quantity</th>
                <th>Plant code</th>
                <th>Value stream code</th>
               ...

CSS

.row {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

    .row::after {
        display: table;
        clear: both;
        content: "";
    }

JavaScript

$("#cancelFilters").hide();

$('#filterButton').click(function () {
    getSelectedVal()
    filterData()
    filters = [];
    $("#cancelFilters").fadeIn();
});

var filters = [];

function getSelectedVal() {
    var materialCode = $('#materialCode option:selected').text()
    var plantCode = $('#plantCode option:selected').text()
    var vsCode = $('#vsCode option:selected').text()
    var status = $('#statusCode option:selected').text()

    applyFilter(materialCode, 1)
    applyFilter(plantCode, 2)
    applyFilter(vsCode, 3)
    applyFilter(status, 4)
}

function applyFilter(value, id) {
    if (value)
        filters.push('.column' + id + ':contains(' + value + ')');
}


function filterData() {
    if (filters.length > 0) {
        var rows = $("#orderListData").find("tr").hide();

        filters.forEach(filter => {
            $("#orderListData td" + filter).parent().show();
        })

    }
}

$('#cancelFilters').click(function () {
    var $rows = $('#orderListData tr');
    $rows.show()
    $("#cancelFilters").fadeOut();
});