Angular Column Total Directive

columnTotals.js

(function (angular) {
    angular.module('column.totals', [])
        .directive('columnTotal', ['$timeout', function ($timeout) {
            function getOffset(elem) {
                let offset = 0;
                let prev = elem.previousElementSibling;
                while (prev) {
                    offset++;
                    prev = prev.previousElementSibling;
                }

                return offset
            }

            return {
                restrict: 'A',
                link: function (scope, elem, attrs) {
                    const $el = elem[0];
                    const table = $el.parentNode.parentNode;
                    attrs.columnZeroValue = attrs.columnZeroValue || 0;

                    scope.$watch(attrs.columnTotal, calculateTotals);

                    function calculateTotals() {
                        $timeout(() => {
                            const column = getOffset($el);
                            $el.innerText = Array.from(table.children).reduce((total, row) => {
                                    if (row.children[column] && !row.children[column].hasAttribute('column-total')) {
                                        const val = parseInt(row.children[column].innerText);
                                        return total + (Number.isNaN(val) ? 0 : val);
                                    }
                                    return total;

                                }, 0) || attrs.columnZeroValue;
                        }, 0);
                    }
                }
            }
        }]);
})(angular);