JSFiddle - React, Tailwind, and code Playground

by Vipin Patil

HTML

<table class="table">
                                <thead>
                                    <tr><th>Description</th>
                                    <th>Date</th>
                                    <th>Format</th>
                                </tr></thead>
                                <tbody>
                                    <tr>
                                        <td data-label="Description">Engagement with Vedanta Chairman &amp; Senior
                                            Management </td>
                                        <td data-label="Date"> Mar 16, 2022 </td>
                                        <td data-label="Format"> <a href="uploads/investors-presentation/Engagement-with-Vedanta-Chairman-Senior-Management.pdf" target="_blank" download="">
                                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="19.859" height="25" viewBox="0 0 19.859 25">
  <defs>
    <clipPath id="clip-path">
      <rect id="Rectangle_1639" data-name="Rectangle 1639" width="19.858" height="25" fill="#74bf44"></rect>
    </clipPath>
  </defs>
  <g id="Download_pdf" data-name="Download pdf" clip-path="url(#clip-path)">
    <path id="Path_39354" data-name="Path 39354" d="M13.31,0c.149.138.306.269.446.416q2.889,3.025,5.777,6.051a1.091,1.091,0,0,1,.326.807q-.01,7.142-.005,14.285a3.3,3.3,0,0,1-2.609,3.36,3.545,3.545,0,0,1-.776.077Q9.925,25,3.381,25A3.3,3.3,0,0,1,0,21.606Q0,12.483,0,3.36A3.3,3.3,0,0,1,2.491.051.616.616,0,0,0,2.594,0Zm-.84,1.182c-.1-.006-.167-.015-.238-.015q-4.415,0-8.831,0a2.083,2.083,0,0,0-2.186,2.2q0,9.1,0,18.2a2.091,2.091,0,0,0,2.226,2.216q6.483,0,12.965,0a2.1,2.1,0,0,0,2.234-2.236q0-6.824,0-13.647V7.632c-1.156,0-2.272,0-3.389,0A2.64,2.64,0,0,1,12.47,4.857c0-1.133,0-2.266,0-3.4ZM17.791,6.4l-4.1-4.3c-.008.133-.016.2-.016.261,0,.832-.005,1.663,0,2.495A1.445,1.445,0,0,0,15.257,6.42c.758,0,1.517,0,2.275,0,.069,0,.139-.008.259-.015" transform="translate(0...

JavaScript

function filterText()
	{  
		var rex = new RegExp($('#displayFilter option:selected').val());
		if(rex =="/all/"){clearFilter()}else{
			$('.table tr').hide();
			$('.table tr').filter(function() {
			return rex.test($(this).text());
			}).show();
	}
	}
    
    function clearFilter()
	{
		$('.filterText').val('');
		$('.content').show();
	}