<th style="width: 3ex;" class="{{ column.headerClass }}">
    <i title="{{ column.title }}" class="icon-check" style="cursor: pointer"></i>

    <script>
        document.addEventListener("DOMContentLoaded", function(){
            console.log("Hello!");

            var isSelected = false;

            $('.{{ column.headerClass }}').on('click', function(){
                console.log('Click');

                var $items = $('.{{ column.itemClass }} :checkbox');
                var stateAll = $items.toArray().every(function(x){ return $(x).is(':checked'); });

                // inverse if it looks neccesary
                if(stateAll === !isSelected) {
                    isSelected = !isSelected;
                }

                $items
                    .prop('checked', !isSelected);

                isSelected = !isSelected;
            });
        });

    </script>
</th>