Scroll events

The values in the last column (AN) are constantly updated with the calculated sum of the visible center column values when scrolling.

Directive

<div ngc-table data="data"
    custom-data-value-fn="customDataFn"
    scroll-fn="onScroll"
    left-column-widths="'40px'"
    center-column-widths="'40px'"
    center-column-number="3"
    right-column-widths="'80px'"></div>

Controller

The onScroll function callback is called a first time when the table is initialized, then each time a scroll event occurs. The function simply updates the scrollPos scope variable

The customData is called each time a data must be rendered typically after a scroll event. In the example, the function return a custom sum of the values displayed in the center columns when displaying data on the last column. This demonstrates how it is possible to combine the scroll position and the scroll information

Lastly, the resultFormatFn function formats the result before displaying the value

angular.module('ngcTableDirectiveTest', ['ngcTableDirective'])
    .controller('TestCtrl', function($scope) {
        $scope.data = [];

        var n = 40;

        for (var row = 0; row < n; row++) {
            var rowContent = [];
            for (var col = 0; col < n; col++) {
                rowContent.push(row * col + col);
            }
            $scope.data.push(rowContent);
        }

        $scope.scrollTopPosition = 0;
        $scope.scrollLeftPosition = 0;

        $scope.$watch('scrollTopPosition', function(newValue) {
            $scope.scrollLeftPosition = (newValue) * 2;
        });

        $scope.$watch('scrollLeftPosition', function(newValue) {
            $scope.scrollTopPosition = (newValue) / 2;
        });

    });