Basic Table
Table is just a mapping of objects to table rows with ngForID | Name | User Name | |
---|---|---|---|
1 | ![]() | sam | s@gmail.com |
2 | ![]() | john | j@gmail.com |
3 | ![]() | will | ws@gmail.com |
4 | ![]() | tom | tom@gmail.com |
5 | ![]() | curse | martha@gmail.com |
6 | ![]() | stewart | sweet@gmail.com |
7 | ![]() | Ram | s@gmail.com |
8 | ![]() | john | jnathan@gmail.com |
9 | ![]() | will mark | wsmark@gmail.com |
Sortable Table
You can introduce custom directives for table headers to sort columnsID | Name | User Name | |
---|---|---|---|
1 | ![]() | sam | s@gmail.com |
2 | ![]() | john | j@gmail.com |
3 | ![]() | will | ws@gmail.com |
4 | ![]() | tom | tom@gmail.com |
5 | ![]() | curse | martha@gmail.com |
6 | ![]() | stewart | sweet@gmail.com |
7 | ![]() | Ram | s@gmail.com |
8 | ![]() | john | jnathan@gmail.com |
9 | ![]() | will mark | wsmark@gmail.com |
Search and filtering
You can do filter table data, in this case with observables and our NgbHighlight component used in Typeahead Full text search:
ID | Full Name | User Name | |
---|---|---|---|
1 | ![]() | ||
2 | ![]() | ||
3 | ![]() | ||
4 | ![]() | ||
5 | ![]() | ||
6 | ![]() | ||
7 | ![]() | ||
8 | ![]() | ||
9 | ![]() |