Sort coordinates sortable column headers and emits the active column with its direction. Use it with Table when a simple local table or a server-driven query needs clickable sorting controls.
Apply ngsSort to the table or sorting region, then add ngs-sort-header to each sortable header.
| Prop | Type | Default |
|---|---|---|
ngsSortActive The id of the currently sorted header. | string | '' |
ngsSortStart The direction used when a header becomes active for the first time. | 'asc' | 'desc' | '' | 'asc' |
ngsSortDirection The current sort direction. | 'asc' | 'desc' | '' | '' |
ngsSortDisableClear Whether clicking a descending header cycles back to ascending instead of clearing the sort. | boolean | false |
ngsSortDisabled Whether all headers connected to this sort directive are disabled. | boolean | false |
| Event | Description |
|---|---|
| ngsSortChange | Emits the active header id and direction after sorting changes. |
| Prop | Type | Default |
|---|---|---|
ngs-sort-header Unique id for the sortable header. This value is emitted as the active sort id. | string | '' |
sortActionDescription Accessible label for the sort action. | string | '' |
disabled Whether this individual sort header is disabled. | boolean | false |
Using this component in production?
NgStarter includes source code, admin dashboard templates, and commercial support.