My Notes


Fishing, Golfing and Programming

Test data grid or table for Electron + Ionic 3 + Angular 4 desktop app

Posted by Ahchi on Aug 8, 2017

Background

For a desktop application, a data grid / table is a very important component, but it is not available in Ionic 3 yet, so I am going to find a data grid / table that is 

easy to implement and
with good scrolling performance.

 

Result

Please refer to this video, it shows 

scrolling performance
sorting performance
memory usage
 

 

Conclusion

conclusion

 

Testing Environment

Sqlite database with 28906 records, 9 fields, 3712 KB

Ngx-datatable : v10.0.1
Canvas-datagrid : v0.13.4
Fin-hypergrid : v2.0.2

Node : v8.1.3
Npm : v5.3.0
Electron : v1.7.5
Electron-builder: v19.19.1
Ionic : v3.6.0
Angular : v4.1.3
SQLite : v2.8.0
Typescript: : v2.3.4

OS : Win 10
CPU : Core i5 4570
Memory : 8G

 

Remark

Actually, I have tried to implement 

ag-grid,
primeng and
angular-material also,

but I have some difficulties to make them load my data with virtual scrolling.

 

References and Credits


Data grid / table
https://github.com/swimlane/ngx-datatable
https://github.com/fin-hypergrid/core
https://github.com/TonyGermaneri/canvas-datagrid
https://www.ag-grid.com/angular-getting-started/#gsc.tab=0
https://www.primefaces.org/primeng/#/datatable
https://material.angular.io/components/table/overview

To add Sqlite support for electron
https://github.com/sjmelia/electron-boilerplate-sqlite

For electron and ionic integration
https://github.com/lohanitech/ionic2-electron-starter
https://github.com/maximegris/angular-electron