samply grid

Tables and grids are essential part of any web application developed today. As these serve the purpose of displaying data efficiently and provide various means to structure data such that it can easily be analysed.

I’ve worked on several projects which leveraged AngularJS for Front-end. And, all of those projects required usage of some sort of table. Hence, I got to play around with available options.

The simplest approach would be use <table> in HTML and try to add functionality based on requirement. However, this approach tends to be cumbersome as one starts adding functionalities such as filtering (column search), sorting, pagination, column hide/show capabilities. These functionalities can easily be addressed by using one of the following options

  1. ng-table
  2. ui-grid/ng-grid (old)
  3. smart table

Smart Table

Fortunately, I got to work with all three as some of the projects already selected the options before I joined. Based on my experience, if one is starting a project today and the application requires tables and grid representation of data, I would recommend Smart Table. Now, developers of Smart Table didn’t pay me to write about it. It’s just that Smart Table is pretty straight forward when it comes to customizing the table and any functionality such as filtering, sorting, pagination can easily be added and customized based on the layout. Additionally, the lines of code required to implement these functionalities with Smart Table is relatively lesser than the other two options.

For starters, Smart Table provides pretty good documentation. In case, you require further help, feel free to reach me at: saurav@sauravkumar.com