Introduction on Smart table:
It is an Angularjs module used for display purpose as a table format with a set of features like filtering, sorting, etc., This is very much helpful during report preparation, filtering and searching of data in a quicker manner in angular js. It is lightweight, developer-friendly, robust, modular, and extensible
- We can start using smart table by using the below ways
- bower install angular-smart-table (or)
- npm install angular-smart-table
- Once the above scripts are executed, we are set in using angular-smart-table
- Add the module angular.module(‘<nameofyourapp>’, [‘smart-table’] to the angular application.
- Just like following normal html table structure, on the table element, need to add the “st-table” attribute to inform smart-table about the collection that will display the data, (i.e., using repeater)
- For Searching a content in angular-smart-table, we need to use, stSearch directive. It can be a comma-separated list of search items that need to be searched
- stDebounceTime attribute (the value is in millisecond) can be used in order to control the searching time. Sometimes useless calls will be made (when especially connected to the server) and in order to overcome, this attribute is needed.
- During search, the input can be a regular expression pattern. Sometimes, in order to escape regexp specific characters in the input, we need to use stSearchEscape attribute.
Basic Examples and Explanations:
Let us see the sample code of searching in the smart table along with filtering and pagination is seen in below code
Data is retrieved from “http://coderszine.com/demo/rest-api/v1/employee/read” for our sample
As we have taken data from the restful endpoint (even from a remote database, restful endpoint, ajax call, etc)
we need to use this attribute without fail. Moreover smart table creates a copy of the displayed collection and since asynchronous data is involved, this attribute is a must.
Here “employees” retrieved as asynchronously and need to be rendered and it is specified in st-safe-src
sort is applied on all columns and hence st-sort is given for sorting.
pagination is applied to have 5 records per page.
With the above approaches, let us render the data in a smart table with search, sort, and pagination functionalities
After Searching a text
Sorting based on Designation