ng-platform-common/src/lib/datatable/datatable.component.html at develop · cartesianui/ng-platform-common · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<ngx-datatable
  #dtTable
  [class]="tableClass"
  [rows]="rows"
  [columns]="headers"
  [columnMode]="columnMode"
  [headerHeight]="headerHeight"
  [footerHeight]="footerHeight"
  [rowHeight]="rowHeight"
  [externalPaging]="externalPaging"
  [count]="count"
  [offset]="offset"
  [limit]="limit"
  [selected]="selected"
  [selectionType]="selectionType"
  (select)="onSelectInternal($event)"
  (page)="onPageInternal($event)"
  (sort)="onSortInternal($event)"
  [sortType]="sortType"
  [messages]="{ emptyMessage: 'No records found', totalMessage: 'total' }"
>
  <!-- Row Detail (only when dtDetail is projected) -->
  <ngx-datatable-row-detail *ngIf="detailTemplate" [rowHeight]="detailRowHeight" (toggle)="onDetailToggleInternal($event)">
    <ng-template let-row="row" let-expanded="expanded" ngx-datatable-row-detail-template>
      <ng-container *ngTemplateOutlet="detailTemplate; context: { $implicit: row, row: row, expanded: expanded }"></ng-container>
    </ng-template>
  </ngx-datatable-row-detail>

  <!-- Checkbox Column -->
  <ngx-datatable-column
    *ngIf="showCheckboxColumn"
    [width]="30"
    [sortable]="false"
    [canAutoResize]="false"
    [draggable]="false"
    [resizeable]="false"
    [headerCheckboxable]="true"
    [checkboxable]="true"
  ></ngx-datatable-column>

  <!-- Dynamic Data Columns -->
  <ngx-datatable-column
    *ngFor="let col of columns"
    [name]="col.label"
    [prop]="col.key"
    [width]="col?.opt?.width || undefined"
    [flexGrow]="col?.opt?.width ? 0 : 1"
    [minWidth]="col?.opt?.minWidth ?? '150'"
    [maxWidth]="col?.opt?.maxWidth ?? undefined"
    [sortable]="true"
  >
    <ng-template let-row="row" ngx-datatable-cell-template>
      <!-- Custom Template Override -->
      <ng-container *ngIf="getCustomTemplate(col.key) as customTpl; else defaultCell">
        <ng-container *ngTemplateOutlet="customTpl; context: { $implicit: row, row: row, col: col }"></ng-container>
      </ng-container>

      <!-- Default Cell Rendering -->
      <ng-template #defaultCell>
        <!-- Link Cell — a plain clickable span, NOT a real <a>: the cell's
             formatted content can carry a nested copy-icon trigger (grouped
             into a multiline stack), and an interactive element (role=button)
             nested inside a real <a> is invalid HTML with flaky
             keyboard/focus behavior. Click is delegated the same way either
             way (see onLinkCellClick) — only the wrapping tag changes. -->
        <ng-container *ngIf="col?.opt?.link === true; else normalCell">
          <span class="dt-link-cell" (click)="onLinkCellClick($event, row)" [innerHTML]="row.dtFormatted(col)"></span>
        </ng-container>

        <!-- Normal Cell -->
        <ng-template #normalCell>
          <ng-container *ngIf="col?.opt?.formatter?.displayAs || col?.opt?.formatter?.type === 'multiline' || isCustomFormatter(col); else plainCell">
            <span [innerHTML]="row.dtFormatted(col)" (click)="onCellClick($event)"></span>
          </ng-container>
          <ng-template #plainCell>{{ row.dtFormatted(col) }}</ng-template>
        </ng-template>
      </ng-template>
    </ng-template>
  </ngx-datatable-column>

  <!-- Extra Columns (__prefixed dtColumn directives) -->
  <ngx-datatable-column
    *ngFor="let extra of extraColumns"
    [name]="extra.columnName"
    [width]="extra.columnWidth || undefined"
    [sortable]="false"
    [canAutoResize]="!extra.columnWidth"
    [draggable]="false"
    [resizeable]="false"
  >
    <ng-template let-row="row" ngx-datatable-cell-template>
      <ng-container *ngTemplateOutlet="extra.templateRef; context: { $implicit: row, row: row }"></ng-container>
    </ng-template>
  </ngx-datatable-column>

  <!-- Expand/Collapse Column (auto-added when dtDetail is projected) -->
  <ngx-datatable-column
    *ngIf="detailTemplate"
    [width]="50"
    [sortable]="false"
    [canAutoResize]="false"
    [draggable]="false"
    [resizeable]="false"
  >
    <ng-template let-row="row" let-expanded="expanded" ngx-datatable-cell-template>
      <button class="btn btn-sm btn-link p-0" (click)="toggleExpandRow(row)">
        <i class="fa" [ngClass]="{ 'fa-chevron-right': !expanded, 'fa-chevron-down': expanded }"></i>
      </button>
    </ng-template>
  </ngx-datatable-column>
</ngx-datatable>