So I have an angular large web application, I have a few pages where I would want to use React to decrease the rendering time of the page (>3000 rows).
While searching for a solution I encountered this react plugin: http://bebraw.github.io/reactabular/
It lets me add a datatable with editing options and more - perfect for my needs. The problem is that there is no easy way to include it in a prebuilt angular app.
Since I am new to react, I wanted to integrate it to my current angular application and I am searching the web for answers for a long time.
I am looking for a way to integrate it to my current code, that looks like the following:
var contactManager = angular.module('contactManager', ['ngMaterial','ngCookies','ngRoute','loadingOnAJAX','truncate','chart.js','xeditable','datatables','ui.calendar',
'xeditable', 'ngFileUpload','ui.bootstrap','html5.placeholder','luegg.directives','angular-svg-round-progress','ngProgress','ngDraggable'])
.run(function($rootScope, ngProgress, editableOptions) {
editableOptions.theme = 'bs3'; // bootstrap3 theme. Can be also 'bs2', 'default'
$rootScope.$on('$routeChangeStart', function(ev,data) {
ngProgress.start();
});
$rootScope.$on('$routeChangeSuccess', function(ev,data) {
// Close menu on mobiles
ngProgress.complete();
});
})
.config(['$routeProvider','$locationProvider','$controllerProvider', function($routeProvider, $locationProvider, $controllerProvider) {
$routeProvider
.when('/index', {
templateUrl: 'partials/adminPanel.html',
controller: 'GroupPanelCtrl',
resolve: GroupPanelCtrl.resolve
})
.when('/profile/:id', {
templateUrl: 'partials/profile.html',
controller: 'ProfileCtrl'
})
.when('/group/:id/contacts', {
templateUrl: 'partials/group-contacts.html',
controller: 'GroupContactsInfo',
resolve: GroupContactsInfo.resolve
})
and the HTML:
<table datatable="ng" class="table table-bordered table-hover dataTable" role="grid" data-page-length="100">
<thead>
<tr>
<th></th>
<th>{{texts.fullName}}</th>
<th>{{texts.title}}</th>
<th>{{texts.mobile}}</th>
<th>{{texts.email}}</th>
<th>{{texts.department}}</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="contact in contacts track by $index">
<td ng-click="clickContact()">{{img}}
</td>
<td ng-click="clickContact()">
<a>
{{::contact.fullName}}
</a>
</td>
<td ng-click="clickContact()">
{{::contact.title|| ""}}
</td>
<td ng-click="clickContact()">
{{::contact.phoneFormatted}}
</td>
<td ng-click="clickContact()">
<span>
{{::contact.email}}
</span>
</td>
<td ng-click="clickContact()">
{{::contact.department|| ""}}
</td>
<td ng-click="deleteContact(contact, $index)">
<span class="fa fa-trash showOnhover"></span>
</td>
</tr>
</tbody></table>
