JSFiddle - React, Tailwind, and code Playground

HTML

<div id='fil' class='filter'>

  <div class='filterBox'>
  <span>Код для заказа</span><input class='filterInput' type='checkbox' data-name='order' checked/>
  </div>

  <div class='filterBox'>
  <span>Наличие</span><input class='filterInput' type='checkbox' data-name='availability' checked/>
  </div>
  
  <div class='filterBox'>
  <span>Цена</span><input class='filterInput' type='checkbox' data-name='price'/>
  </div>
  

</div>

<div class='table'>

  <table>
  
        <thead>
          <tr style='background:yellow'>
          
            <td class='target' name='order'>Код для заказа</td>
            <td class='target' name='availability'>Наличие*</td>
            <td class='target' name='price'>Цена*</td>
            <td class='target' name='foto'>Фото</td>

          </tr>  
          
        </thead>
      
       <tbody>
        
          <tr class='itemInfo'>
            
            <td>AM26C31ID (TI)</td>
            <td>Yes</td>
            <td>0.4051 $<br>от 1240шт</td>
            <td>No</td>
          </tr>
          
           <tr class='itemInfo'>
            
            <td>AM26C31ID (TI)</td>
            <td>Yes</td>
            <td>0.4051 $<br>от 1240шт</td>
            <td>No</td>
          </tr>
          
           <tr class='itemInfo'>
            
            <td>AM26C31ID (TI)</td>
            <td>Yes</td>
            <td>0.4051 $<br>от 1240шт</td>
            <td>No</td>
            
          </tr>
       </tbody>
  
  </table>

</div>

CSS

.filter {
  
  float:left;
  
  width:200px;
  
  margin-right:30px;
}

.filter input {

  position:absolute;
  
  right:0;
  
}

.filterBox {
  
  position:relative;
  
}

JavaScript

(function () {
  
  	var inputs = document.querySelectorAll('.filterInput');
    
    var target = document.querySelectorAll('.target');
    
    var itemInfo = document.querySelectorAll('.itemInfo');
    
    for (var i=0; i<inputs.length; i++) {
    
     var getAttr = inputs[i].getAttribute('data-name');
     
     	for (var q=0; q<target.length; q++) {
     
      	var targetAttr = target[q].getAttribute('name');
        
        if (getAttr == targetAttr) {
        
        	if (!(inputs[i].checked)) {
          
          	target[i].style.display='none';
            
            for (var m=0; m<itemInfo.length; m++) {
            
            	itemInfo[m].children[q].style.display='none';
            
            }
          
          }
        
        }
      
      }
    
    }

  })();
  
  
  function handler (el) {
  
  	var target = el.target;
    
    if (target.tagName != 'INPUT'){return};

    var getAttr = target.getAttribute('data-name');
    
     var td = document.querySelectorAll('.target');
     
     var itemInfo = document.querySelectorAll('.itemInfo');
  
  	for (var i=0; i<td.length; i++) {
    
    	var tdgetAttr = td[i].getAttribute('name');
      
      if (getAttr == tdgetAttr) {
        
        	if (!(target.checked)) {
          
          	td[i].style.display='none';
            
            for (var m=0; m<itemInfo.length; m++) {
            
            	itemInfo[m].children[i].style.display='none';
            
            }
          
          }
          
          else {
          
          	td[i].style.display='table-cell';
            
            for (var m=0; m<itemInfo.length; m++) {
            
            	itemInfo[m].children[i].style.display='table-cell';
            
            }
          
          
          }
        
        }
    
    
    }
  
  }
  
  fil.addEventListener('click',handler);