JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <thead>
        <tr>
            <th scope='col' id='toggler'>
                <input type='checkbox' id='toggleAll'>
                <label for='toggleAll'>Select all</label>
            </th>
            <th scope='col'>A column</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td headers='toggler'>
                <input type='checkbox'>
            </td>
            <td>some cell data</td>
        </tr>
        <tr>
            <td headers='toggler'>
                <input type='checkbox'>
            </td>
            <td>some cell data</td>
        </tr>
        <tr>
            <td headers='toggler'>
                <input type='checkbox'>
            </td>
            <td>some cell data</td>
        </tr>
        <tr>
            <td headers='toggler'>
                <input type='checkbox'>
            </td>
            <td>some cell data</td>
        </tr>
    </tbody>
</table>

CSS

table {
    border-collapse: collapse;
}
thead {
    background-color: #fd0;
}
td {
    border: 1px solid #006;
}

JavaScript

$('#toggleAll').change(function () {
    $('td[headers~="toggler"] >  input[type="checkbox"]').prop('checked', $(this).prop('checked'));
});

$('td[headers~="toggler"] > input[type="checkbox"]').change(function() {
    var allChecked = true, noneChecked = true;
    var headerCheckbox = $('#toggleAll');
    
    $('td[headers~="toggler"] > input[type="checkbox"]').each(function(i, domElement) {
        if(domElement.checked) {
            // at least one is checked
            noneChecked = false;
        } else {
            // at least one is unchecked
            allChecked = false;
        }
    });
    
    if(allChecked) {
        headerCheckbox.prop('checked', true);
        headerCheckbox.prop('indeterminate', false);
    } else if (noneChecked) {
        headerCheckbox.prop('checked', false);
        headerCheckbox.prop('indeterminate', false);
    } else {
        headerCheckbox.prop('indeterminate', true);
    }
});