0

I have been finding the solution for large data tables in angular js with bi-direction binding. Unfortunately I could not get best solution.

As shown below, I'm trying to load the data more than 5000 rows with 20 columns in single table. But application performance is very poor loading and taking time 3 to 4 minutes. After investigation using Angular watchers add on. I found 275,000 watchers in single page due to large data in single table.

Is there any way to improve the performance and reducing the watchers?

<table>
    <colgroup>
        <col ng-style="{ width: h.columnWidth}" data-ng-repeat="h in vm.copyHeadersDeepCopy track by $index"></col>
    </colgroup>
    <tbody>
    <tr ng-repeat="l in vm.copyColumns">
        <td ng-class="(l.rowSelected == true)?'selected':''"
            ng-repeat="c in l.values"
            title="{{c.parameterValue}}">
            <div title="{{'No Value Defined' | translate}}"
                 data-ng-if="vm.getCopyCellInformations(c).type == 'hole'">
                <i class="fa fa-exclamation-triangle"></i>
            </div>
            <div title="{{'empty' | translate}}"
                 data-ng-if="vm.getCopyCellInformations(c).type == 'grouped'">

            </div>
            <div title="{{c.parameterValue}}"
                 data-ng-if="vm.getCopyCellInformations(c).type == 'value'">
                <i class="fa" style="cursor: pointer"
                   data-ng-show="c.parameterValue"
                   data-ng-click="vm.toggleNode(c)"
                   data-ng-class="c.active ? 'fa-check-square-o' : 'fa-square-o'"></i>
                {{c.parameterValue}}
            </div>
        </td>
    </tr>
    </tbody>
</table>
Improve this question
9
  • You may use <ng2-smart-table> for that Commented Dec 18, 2018 at 10:37
  • If you don't want to use third-party libraries, think about finding an approach that renders just the visible part. Repeaters should be clever enough to render in the DOM only the visible portion of the table, otherwise think about a pagination system, so that only X row will be rendered at once. Another approach is to use the "infinite scroll" approach, where rows are loaded on demand when the user scrolls the table. Either alternatives are usually implemented in many diffused plugins / angular components in general. This is an example: ui-grid.info or ag-grid.com Commented Dec 18, 2018 at 10:39
  • 1
    get limited data from server side and set pagination on your front-end. Commented Dec 18, 2018 at 10:42
  • You should try angularjs datatable Commented Dec 18, 2018 at 10:42
  • 1
    ciphertrick.com/2015/08/31/server-side-pagination-in-angularjs Commented Dec 18, 2018 at 10:44
Related questions
2
Angular performance with tabs and tables
4
AngularJS ngTable is slow on lot of data
1
angularJS datatables performance
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.