pro-table/src/app/table-example/table-example.component.html at main · ProAngular/pro-table · 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
<section>
  <h3>Table Example</h3>

  <div class="options-group">
    <mat-checkbox
      #selectableToggle
      type="checkbox"
      [checked]="selectable()"
      (change)="selectable.set(selectableToggle.checked)"
      >Selectable Rows</mat-checkbox
    >
    @if (selectable()) {
      <mat-checkbox
        #enableMaxSelectToggle
        type="checkbox"
        [checked]="enableMaxSelect()"
        (change)="enableMaxSelect.set(enableMaxSelectToggle.checked)"
        >Max Select of 3</mat-checkbox
      >
    }
    <mat-checkbox
      #rowClickEnabledToggle
      type="checkbox"
      [checked]="rowClickEnabled()"
      (change)="rowClickEnabled.set(rowClickEnabledToggle.checked)"
      >Row Click Event</mat-checkbox
    >
    <mat-checkbox
      #stickyHeaderToggle
      type="checkbox"
      [checked]="stickyHeader()"
      (change)="stickyHeader.set(stickyHeaderToggle.checked)"
      >Sticky Header</mat-checkbox
    >
    <mat-checkbox
      #sortableHeadersToggle
      type="checkbox"
      [checked]="sortableHeaders()"
      (change)="sortableHeaders.set(sortableHeadersToggle.checked)"
      >Sortable Headers</mat-checkbox
    >
    <mat-checkbox
      #copyEmailToggle
      type="checkbox"
      [checked]="copyEmail()"
      (change)="copyEmail.set(copyEmailToggle.checked)"
      >Copy Email on Click</mat-checkbox
    >
    <mat-checkbox
      #highlightOddRowsToggle
      type="checkbox"
      [checked]="highlightOddRows()"
      (change)="highlightOddRows.set(highlightOddRowsToggle.checked)"
      >Highlight Odd Rows</mat-checkbox
    >
    <mat-checkbox
      #expandableRowsToggle
      type="checkbox"
      [checked]="enableExpandableRows()"
      (change)="enableExpandableRows.set(expandableRowsToggle.checked)"
      >Enable Expandable Rows</mat-checkbox
    >
  </div>

  <pro-table
    (rowClick)="onRowClick($event)"
    (rowSelectChange)="onRowSelect($event)"
    (sortChange)="onSortChange($event)"
    [columns]="enableExpandableRows() ? columnsExpandable() : columns()"
    [data]="enableExpandableRows() ? dataExpandable() : data()"
    [highlightOddRows]="highlightOddRows()"
    [initialSort]="{ key: 'id', direction: 'asc' }"
    [maxSelectableRows]="enableMaxSelect() ? 3 : null"
    [rowClickEnabled]="rowClickEnabled()"
    [selectable]="selectable()"
    [stickyHeader]="stickyHeader()"
    placeholderEmptyData="N/A"
    placeholderEmptyList="No items to display."
    placeholderLoading="Loading..."
  />
</section>

@if (selectable()) {
  <section>
    <h4>Selected Rows</h4>
    <textarea
      rows="15"
      class="form-value-display"
      [innerHTML]="pretifyJson(selectedRows())"
    ></textarea>
  </section>
}

<ng-template #expendableRow let-data="data">
  <pre>{{ pretifyJson(data) }}</pre>
</ng-template>