Lately, we have started working on v3.0 of ABP Framework and our ultimate goal as the frontend team is to introduce solutions that improve developer experience. In this context, one of the things we are working on is migrating the current grid in Angular to the feature-rich ngx-datatable. Nevertheless, when we tried to implement it in the project, we have realized that the amount of code duplicated in each CRUD page was troublesome.

<ngx-datatable
  [rows]="data$ | async"
  [count]="totalCount$ | async"
  [loadingIndicator]="list.isLoading$ | async"
  [limit]="list.maxResultCount"
  [offset]="list.page"
  (page)="list.page = $event.offset"
  (sort)="sort($event)"
  [externalPaging]="true"
  [externalSorting]="true"
  [headerHeight]="50"
  [footerHeight]="50"
  rowHeight="auto"
  columnMode="force"
  class="material"
>
  <!-- templates here -->
</ngx-datatable>

We have a ListService which makes it easier to work with remote pagination and sorting. It is a core feature and we are planning to keep it as UI independent as possible. Some properties of ngx-datatable fit really well, while others, sorting specifically, do not.

Nothing is wrong with ngx-datatable. It actually is an amazing work and probably one of the best grids you can use in Angular. And, to be fair, all of the bindings above are for rendering the content properly, so they are not useless after all. Still, from a developer experience perspective, this is painful. Here is how we see it:

  • CRUD pages in the community version of ABP would require this code to be copied manually over and over. We should avoid this somehow.
  • Although there is [a nice code generator](htt