Sharing Top Content from the Angular-sphere.

Which grid is performant: jQuery Datatable, Angular UI Grid or a custom Grid?

#jQuery Datatable vs #Angular UI Grid vs custom Grid – which one is the best grid?

  • Over the years, we have used everything from jQuery Datatable to more recent libraries like Angular UI Grid.
  • One could argue that Angular UI Grid and jQuery Datatable offer lot of built-in features out of the box such as sorting, column pinning, etc. and that is always useful when you are staring down some stringent timelines.
  • Though, the grid developed using Angular UI Grid and jQuery Datatable, in theory, was simple and read-only, the grid was not performant on various browsers.
  • We tried tweaking Angular UI Grid and jQuery Datatable to eke performance out of them.
  • The table below compares the performance of a similar grid designed using jQuery Datatable, Angular UI and custom grid, in both normal and 6x CPU throttled conditions.

Choosing a grid is an important part of the software development cycle. We analyze the performance of various grids based on different criteria.

When developing modern frontends, one of the key requirements is world class performance. We consider it to be one of the key UX criteria. Google thinks its important enough that it penalises pages that are slow.

We religiously look at the page weight as one of the factors to improve performance. And data heavy grids often contribute to page weight. So, we keep benchmarking various popular grids before each project.

Over the years, we have used everything from jQuery Datatable to more recent libraries like Angular UI Grid. In this blog, we are not trying to answer which one is the best every single time. Different use cases merit different choices. One could argue that Angular UI Grid and jQuery Datatable offer lot of built-in features out of the box such as sorting, column pinning, etc. and that is always useful when you are staring down some stringent timelines.

However, in our case, we needed a simple read-only grid where each row height aligned automatically to accommodate the contained text. We weren’t required to build any other features like infinite scroll, etc. We also needed to build a simple sorting logic for each of the column in the grid. Considering all the work we have done with Angular, we first went with Angular UI and we even tried implementing the same grid using jQuery Datatable. But, after all that, we decided to build a custom…

Which grid is performant: jQuery Datatable, Angular UI Grid or a custom Grid?