Basic Table
Table is just a mapping of objects to table rows with ngFor| ID | Name | User Name | |
|---|---|---|---|
| 1 | Sam | sam | s@gmail.com |
| 2 | John | john | j@gmail.com |
| 3 | Will Smith | will | ws@gmail.com |
| 4 | Tom Hardy | tom | tom@gmail.com |
| 5 | Martha Curse | curse | martha@gmail.com |
| 6 | Kristen | stewart | sweet@gmail.com |
| 7 | Mam | Ram | s@gmail.com |
| 8 | Johnathan | john | jnathan@gmail.com |
| 9 | Will mark | will mark | wsmark@gmail.com |
Sortable Table
You can introduce custom directives for table headers to sort columns| ID | Name | User Name | |
|---|---|---|---|
| 1 | Sam | sam | s@gmail.com |
| 2 | John | john | j@gmail.com |
| 3 | Will Smith | will | ws@gmail.com |
| 4 | Tom Hardy | tom | tom@gmail.com |
| 5 | Martha Curse | curse | martha@gmail.com |
| 6 | Kristen | stewart | sweet@gmail.com |
| 7 | Mam | Ram | s@gmail.com |
| 8 | Johnathan | john | jnathan@gmail.com |
| 9 | Will mark | 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 | ![]() |
Sam
John
Will Smith
Tom Hardy
Martha Curse