Smart table for Angularjs has been a reference in Angularjs community in term of table/grid component. It was praised for its declarative approach and its flexibility compared to others popular solutions.

Last year, using the experience I had acquired on this project, I created smart-table-core. The idea was to extract the logic you would need to have a smart collection you could sort, filter, search or create pagination and cursors with it (pretty common use case in many applications). It is not bound to any UI framework neither is bound to table/grid components. In fact, I see it more as an interactive data structure, although it is really handy to create table/list components.

To validate the idea and the design, I quickly created a bunch of wrappers for popular UI frameworks (Vanilla javascript, React, Vuejs — all coming with a running demo). I also wanted it to focus on few core features making it very lightweight whereas it could be easily extended with regular Javascript idioms such mixins, decorators, etc. This requirement was validated too with a various set of extensions:

smart-table-crud extends the data structure API to give CRUD capabilities.

smart-table-perf decorates one method to log performance data.

smart-table-server overwrite a method to move business logic to a server without changing anything to your component.

smart-tabler-virtualizer uses a smart table instance pagination API to virtualize a long list of data.

Lately spudsoftware kindly agreed to sponsor the development of a wrapper for Angular framework and in this serie, we are going to learn how to use the new smart-table-ng package to build sophisticated table/list component.

The package comes as: