Displaying large tables of data with angular and MVC

Question

We are trying to display large amounts of data on a webpage. Data is cached, and is loaded via angular (to allow the actual page to load first and then fetch the data for the grid)

All working ok, however once the data has been received, the page freezes for 1 - 3 seconds, which we assume is due to the table being rendered.

Size of table can vary, and range from 20 columns 10 rows to 100 columns 100 rows.

All data has to be loaded, as it is to display trends etc.

Below is the table:-

<table id="tbl" class="table table-striped table-bordered" ng-repeat="Grid in userresults.Trend">
                <tr ng-repeat="item in Grid" ng-show="$first">
                    <th ng-repeat="somat in item | filter:{ColumnType :'!1'}">
                    {{somat.ColumnHeader}}
                    </th>
                </tr>
                <tr ng-repeat="item in Grid">
                    <td ng-repeat="somat in item | filter:{ColumnType : '!1'}"    >
                    {{somat.ColumnValue}}
                    </td>          
                </tr>        
            </table>

Below is the angular:-

  $scope.GetPatientResults = function () {
              $("#ResultsLoader").show();

              var url = "/user/11111/GetUserResults/";

              $http.get(url)
                    .success(function (data) {
                        // if successful, bind success message to message

                        $scope.userresults = data;
                        $("#ResultsLoader").hide();
                        $('#ResultsSummary').show();

                    });
          };

is there a way to actually only build part of the table that is displayed on screen to avoid this 1 - 3 second rendering / some kind of lazy loading for tables for rows and columns?

Any help / advise is greatly appreciated as this is currently impacting usability on our system.

Answer 1

One alternative may be to try to use ngGrid instead of a table. I believe that ngGrid will only render the items seen on screen, and not all grid items at once. If your problem is indeed the browser rendering, this approach should help.

Answer 2

The problem might be the <table> rendering type of the browsers. All browsers render tables when all the columns and rows complete, so your data delay the rendering. There is an option to make the appropriate changes in order to render everything in div or try the following link which says that speeds up the table layout.

<div id="tbl" style="float:left;" ng-repeat="Grid in userresults.Trend">
            <div  style="float:left;" ng-repeat="item in Grid" ng-show="$first">
                <div style="float:left;width:200px;" ng-repeat="somat in item | filter:{ColumnType :'!1'}">
                {{somat.ColumnHeader}}
                </div>
            </div>
            <div style="float:left;" ng-repeat="item in Grid">
                <div style="float:left;width:200px;" ng-repeat="somat in item | filter:{ColumnType : '!1'}">
                {{somat.ColumnValue}}
                </div>          
            </div>        
        </div>