Заголовки изменяют размеры не столбцы с плагином colResizable jQuery

Question

Я использую плагин colResizable jQuery и эту директиву для изменения размера столбцов таблицы

.directive('colResizeable', function () {
    return {
        restrict: 'A',
        link: function (scope, elem) {
            setTimeout(function () {
                elem.colResizable({
                    liveDrag: true,
                    gripInnerHtml: "<div class='grip'></div>",
                    draggingClass: "dragging",
                    onDrag: function () {
                        //trigger a resize event, so width dependent stuff will be updated
                        $(window).trigger('resize');
                    }
                });
            });
        }
    }
})

, и я добавил в таблицу атрибут col-resizeable селектор

<table id="myTable" style="display:block" name="form" class="table__body"
       on-scroll-end="vm.loadMoreListItems()" on-scroll-end-threshold="0"
       col-resizeable>

И добавил <script src="src/scripts/lib/less/colResizeable.js"></script> также, но когда я пытаюсь изменить размер столбцов таблицы, перемещаются только заголовки, а не столбцы, вот изображение

как я могу изменить размер столбца?