1

I started a new project and front end uses AngularJS and BootStrap. Time now to present data using tables. Am reviewing nggrid, ngtable, Smart-table etc. I have seen the StackO Question Best way to represent a Grid or Table in AngularJS with Bootstrap 3?. I see that its a bit old and am looking reviews with latest version. Can someone please nudge me some reviews so I may pick one. One requirement upfront is I have got lots of data to show, nothing unusual about this. We are building a web front end for a desktop Hospital Management system app the tables run into hundreds and rows will be less than a million.

Community
  • 1
  • 1
VivekDev
  • 20,868
  • 27
  • 132
  • 202

2 Answers2

1

I have tried smart-table and found this to be too slow when rendering a table with lots of columns.

I then tried a few other table options and found them also to be too slow. Now I instead just use ng-repeat with the angular paging directive. Howerver, I plan to try switching to use virtualRepeat with angular material:

virtual repeat

Angular material comes with a lot of other great features too, which are worth checking out. You will need to implement your own sorting if you need that, but that is quite straight forward to do - add ng-click that triggers a function that sorts your array (perhaps also using $filter to create a custom orderBy function).

Edit: there are a few limitations with using virtual repeat, but if you don't mind having fixed column widths, then it works well: simple table virtual repeat example

Wrap <md-virtual-repeat-container id="vertical-container"> around your table and use <tr md-virtual-repeat="..."> to loop through table rows, giving rows a fixed width. Then a seperate table can display the headers above, also using a fixed width for each header.

trees_are_great
  • 3,881
  • 3
  • 31
  • 62
  • 1
    I am not aware of Angular Material. Taking a look at it. – VivekDev Oct 16 '15 at 10:13
  • 1
    I have just checked and virtual repeat is not currently easily compatible with table headers: http://codepen.io/anon/pen/KdyPwe - they scroll with the items, so currently I would suggest own ng-repeat implementation with paging directive. I have raised a feature request for angular material to support his: https://github.com/angular/material/issues/5204 – trees_are_great Oct 16 '15 at 10:53
  • 1
    I used smart table and was happy with the results. We have about 300K records, just had to make sure to do some server side paging/sorting. I like it because it exposes the TABLE html markup so you can easily control how it looks. – What-About-Bob Oct 16 '15 at 12:56
  • 1
    If you are doing paging\sorting on the server side, then what does smart table give you? To expose the table html, then you could just use an ng-repeat on tr without the performance hit of smart table. – trees_are_great Oct 16 '15 at 13:13
1

I have tried ng-table but didn't think it was a good option, I found it quite hard to use, but maybe I just didn't invest the time.

filype
  • 8,034
  • 10
  • 40
  • 66