How can i integrate tablesaw to my angular project??

[zachleat]

We are unlikely to provide general Angular support here, sorry! If you have specific questions about a problem integrating into your project, please ask!

[VickyMahir]

@Bijayini we can use this by create directive for this. See below :

AppModal.directive('tableSaw', function ($timeout) {
        return {
            restrict: 'A',
            link: function (scope, element, attrs) {
                if (scope.$first === true) {
                    $timeout(function () {
                        $(document).trigger("enhance.tablesaw");
                    },1000);
                }
                if (scope.$last === true) {
                        $timeout(function () {
                            $('table').table().data("table").refresh();
                        }, 1000);

                }
            }
        }
    })

HTML code like this :

<div class="table-responsive">
        <table class="tablesaw table table-bordered" data-tablesaw-mode="swipe" data-tablesaw-minimap>
            <thead>
                 <tr>
                    <th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="persist"></th>
                    <th scope="col" ng-repeat="key in array" align="center">
                    {{key}}
                    </th>
                    <th scope="col" data-tablesaw-priority="persist">Total</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="data in yourArray" table-saw>
                    <td ng-bind="data.Name"></td>
                    <td ng-repeat="value in array">{{value}}</td>
                    <td>Sum of Row</td>
                </tr>
            </tbody>
        </table>
    </div>

See here i have bind table saw on header bind then i have refresh that on last element bind.

If you want to update that on scope value change than you can do as per below :

AppModal.directive('tableSaw', function ($timeout) {
        return {
            restrict: 'A',
            link: function (scope, element, attrs) {
                if (scope.$first === true) {
                    $timeout(function () {
                        $(document).trigger("enhance.tablesaw");
                    }, 1000);
                }
                if (scope.$last === true) {
                    scope.$watch(Here your updated value, function () {
                        $('table').table().data("table").destroy();
                        $timeout(function () {
                            $('table').table().data("table").refresh();
                        }, 1000);
                    })

                }
            }
        }
    })