Performance

Data will be generated after 2 seconds and the table updated automatically once done. See the code below

You can change the rows and cols parameters in the URL and reload the page to test out performance. Be careful though, huge numbers will overload your browser because of the amount of data generated and not the rendering. It has been tested successfully with numbers up to 100k rows x 1k cols (this means 100 millions cells) on a Macbook Pro (Firefox, Chrome, Opera & Safari).

Directive

<div ngc-table
    data="data"
    left-column-number="2" left-column-widths="'60px'"
    center-column-number="5" center-column-widths="'60px'"
    right-column-number="2" right-column-widths="'60px'"
    header-row-number="2" header-row-heights="'15px'"
    row-number='15' row-heights="'15px'"
    footer-row-number="3" footer-row-heights="'15px'"></div>

Controller

angular.module('ngcTableDirectiveTest', ['ngcTableDirective'])
    .controller('TestCtrl', function($scope, $timeout, $location) {
        // Initialize the data as empty array
        $scope.data = [];
        $scope.rows = 0;
        $scope.cols = 0;

        // After 2000 ms, create the data
        $timeout(function() {
            // Get the rows and columns values from the URL
            $scope.rows = parseInt($location.search().rows) || 1000;
            $scope.cols = parseInt($location.search().cols) || 1000;

            // Create a new array and fill it
            var newData = [];
            for (var row = 0; row < $scope.rows; row++) {
                var rowContent = [];
                for (var col = 1; col < $scope.cols + 1; col++) {
                    rowContent.push(row * col + col);
                }
                newData.push(rowContent);
                }
            // Assign the new array to the data of the scope
            $scope.data = newData;
        }, 2000);
    });