GC DataTable

This chapter provides documentation about the DataTable graphical control.

Performance Study

Investigation shows that when we use GC Components inside of data cells, ng-repeat creates a lot of watchers. This is the main problem of any ng-repeat. Classical solution for this is to use one-time watchers (for example, using bindonce libraryhttps://github.com/Pasvaz/bindonce). But, this is not our case, because we don't know in advance which data will be updated DYNAMICALLY inside of the GC Components in datatable cells. So, this solution seems very limited.

Basic improvements that could be done, are already in place, so, this is also not a solution for our case:

• Do not use an inline method call for calculating the data - not our case.
• Do not use AngularJS directives ng-mouseenter, ng-mouseleave, etc - we can not avoid it, otherwise, we will loose GC Components power.
• Use "track by" to let Angular know the objects unique keys - we already use "track by $index" when rendering rows in run time.

Possible solution:

Having said that, the only possible solution for this problem is to try using infinite scrolling. In that way, we limit maximum number of rows rendered at once, and user will not know this. Infinite scrolling can be applied by using "limitTo" standard Angular filter. Or, if it's not effective, trying to use custom directive. Angular "limitTo" filter should be binded to scope variable, that is changed dynamically when user scrolls until the end of the list.

Potential problems with the solution:

• If user changes the data binded to table cells, after he already scrolled a lot and has 1000+ records on the screen - it can be slow anyway.
• Mobile phones are not good with infinite scrolling - they usually lags when scrolling a lot of data. So, in mobile apps, we should use paging instead of infinite scroll.

Sorting system

DataTable sorting system options can be defined in columns editor. They are:

• Sort value.
• Sort direction.

Sort value means by which property of $dfx_item all DataTable rows must be sorted. For example if JSON object item has property name, it can be used as Sort value also (without $dfx_item).

If column Sort value is empty - DataTable rows will not be sorted after clicking on column header.

Sort direction can be ascending/descending and changed by editor radio buttons.