AngularJS tables
I'm trying to use a filament table ( https://github.com/filamentgroup/tablesaw ) in angularJS (I really like this filled function) but I don't know how to start. Many articles seem to point to the use of AngularJS directives in converting existing jQuery plugins to Angular directives. Does this mean that for every jQuery tag I use from Tablesaw, I need to rewrite the entire JQuery function from Tablesaw to Angular?
Realizing that Angular wants us to avoid DOM manipulation with JQuery and rethink how we develop our applications. However, it doesn't make sense to ditch the hundreds of well-made jQuery libraries available on the web and just waste the time and effort rewriting the libraries to work along the Angular path.
Really appreciate someone kick me JQuery TableSaw and Angular. Thanks in advance!
source to share
I got a table to work in a table where 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 calling key only works after the full table has been rendered, so I am applying the row directive, so it can only initiate the plate after the last row has been rendered.
Here's my table (note the table saw directive attached next to 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 included:
require('jquery');
require('../../node_modules/tablesaw/dist/tablesaw.css');
require('../../node_modules/tablesaw/dist/tablesaw.jquery.js');
I am not including tableaw-init.js (this results in an error and should be missing in the case of manual initialization as stated in their docs).
Call note $(document)
. The docs in the git table state that to manually initialize tables on an element, we have to call trigger("enhance.tablesaw")
on any parent element, and tableaw will scan the tree and include it in all children that have the correct table markup. It's up to you if you want to call it $document
or perhaps some kind of predefined parent.
source to share