Tablesaw in AngularJS

Question

I've been trying to use filamentgroup's tablesaw ( https://github.com/filamentgroup/tablesaw ) in angularJS (I really love this feature filled table), but i have no idea how to start. Many articles seems to point towards using AngularJS's directives in converting existing JQuery plugins to Angular's Directives. Does that mean for every JQuery tag i'm using from Tablesaw, i have to rewrite the entire JQuery function from Tablesaw over to Angular?

Understanding that Angular wants us to avoid DOM manipulation from JQuery, and to rethink how we develop our apps. However, it doesn't make sense to forego hundreds of well done JQuery libraries available online and just waste time and effort to rewrite libraries to work in the way Angular wants.

Really appreciate anyone to kickstart me with JQuery TableSaw and Angular. Thanks in advance!

Answer 1

I got tablesaw to work for a table where the rows are generated by ng-repeat with the following directive:

app.directive("tableSaw", ['$timeout', function ($timeout) {
        return {
            restrict: 'A',
            link: function($scope, element, attr) {
                if($scope.$last === true) {
                    $timeout(function () {
                        $(document).trigger("enhance.tablesaw");
                    });
                }

            } // end link
        };
    }]);

The key being the call to tablesaw only works after the complete table has been rendered, this is why I am applying the directive row-wise, so it can initiate tablesaw only after the final row has been rendered.

Here's my table (note the table-saw directive applied alongside ngRepeat):

<div id="myContainer" ng-controller="AdminUserListCtrl as vm">
    <table id="myTable"
       class="tablesaw tablesaw-stack" data-tablesaw-mode="stack">
        <thead class='study-list-header'>
            <tr>
                <th scope="col" data-tablesaw-sortable-col>
                    Name
                </th>
                <th scope="col" data-tablesaw-sortable-col>
                    Email
                </th>
            </tr>
        </thead>

        <tbody id="studyListData">
            <tr class="study-list-row"
                ng-repeat="elem in vm.usersList"
                table-saw>
               <td>{{elem.last_name}}, {{elem.first_name}}</td>
               <td>
                   {{elem.email}}
               </td>
            </tr>
        </tbody>
    </table>
</div>

My includes are:

require('jquery');
require('../../node_modules/tablesaw/dist/tablesaw.css');
require('../../node_modules/tablesaw/dist/tablesaw.jquery.js');

I do not include tablesaw-init.js (it results in an error and should be absent in the case of manual initialization as specified in their docs).

A note on the call to $(document). The docs in the tablesaw git page specify that for manual initialization of tablesaw on an element we should call trigger("enhance.tablesaw") on any parent element and tablesaw will scan the tree and enable itself on all child elements that have the correct tablesaw markup. It is up to you if you want to call it on $document or perhaps on some kind of predefined parent element.