Browse Source

Enable column header click sorting in extensible table

Adds click handlers and pointer cursor styling to sortable column headers in the extensible table component. This allows users to sort columns by clicking on the header, improving table usability.
pull/23210/head
Fahri Gedik 7 months ago
parent
commit
e2c4f5c5ff
  1. 11
      npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.html

11
npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.html

@ -64,17 +64,24 @@
[prop]="prop.name"
[sortable]="prop.sortable"
>
<ng-template ngx-datatable-header-template let-column="column">
<ng-template ngx-datatable-header-template let-column="column" let-sortFn="sortFn">
@if (prop.tooltip) {
<span
[ngbTooltip]="prop.tooltip.text | abpLocalization"
[placement]="prop.tooltip.placement || 'auto'"
container="body"
[class.pointer]="prop.sortable"
(click)="prop.sortable && sortFn(column)"
>
{{ column.name }} <i class="fa fa-info-circle" aria-hidden="true"></i>
</span>
} @else {
{{ column.name }}
<span
[class.pointer]="prop.sortable"
(click)="prop.sortable && sortFn(column)"
>
{{ column.name }}
</span>
}
</ng-template>
<ng-template let-row="row" let-i="index" ngx-datatable-cell-template>

Loading…
Cancel
Save