JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr>
        <th>Header. Nothing should happen will click cell in this column</th>
        <th bgcolor= "yellow"><input id="header" type="checkbox"/></th>
    </tr>
<tr>
        <td>Row 1</td>
        <td><input class="check_all" type="checkbox"/></td>
    </tr>
<tr>
        <td>Row 2</td>
        <td><input class="check_all" type="checkbox"/></td>
    </tr>    
</table>

CSS

th, td {border:1px solid black;padding:20px;}

JavaScript

$('th, td').click(function (event) {
 
    if (!$(event.target).is('input')) {

        $('input:checkbox', this).prop('checked', function (i, value) {
         
        	//console.log('i', i)
          //console.log('value', value)
          //console.log('this', this)
          
          //$(':checkbox').prop('checked', this.checked); // disable this line for working checkedbox when cell is clicked.
          //$(':checkbox[class="check_all"]').prop("checked", $(this).prop("checked"));
          
           return !value;
         });
      }
  });