angular-reccos-shop/src/app/design-system/data-table/data-table.html at rs-product-compatibility-tab · enterpriseShop/angular-reccos-shop · 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
<div [class]="containerClasses()">
  <div class="overflow-x-auto">
    <table class="w-full text-left text-xs">
      <!-- Table Header -->
      <thead
        class="bg-gray-50/80 dark:bg-slate-800/80 text-gray-500 dark:text-slate-400 font-semibold border-b border-gray-100 dark:border-slate-700/80 uppercase tracking-wider"
      >
        <tr>
          @for (col of columns(); track col.key) {
          <th
            [style.width]="col.width || 'auto'"
            [class.text-center]="col.align === 'center'"
            [class.text-right]="col.align === 'right'"
            class="px-4 py-3.5 select-none"
          >
            <div class="inline-flex items-center gap-1">
              <span>{{ col.header }}</span>
            </div>
          </th>
          } @if (hasActions()) {
          <th class="px-4 py-3.5 text-right">Ações</th>
          }
        </tr>
      </thead>

      <!-- Table Body -->
      <tbody
        class="divide-y divide-gray-100 dark:divide-slate-700/60 text-gray-700 dark:text-slate-200"
      >
        @if (loading()) { @for (i of [1, 2, 3, 4, 5]; track i) {
        <tr>
          @for (col of columns(); track col.key) {
          <td class="px-4 py-3.5">
            <app-skeleton height="h-4" />
          </td>
          } @if (hasActions()) {
          <td class="px-4 py-3.5">
            <app-skeleton height="h-4" width="w-16" />
          </td>
          }
        </tr>
        } } @else if (data().length === 0) {
        <tr>
          <td [attr.colspan]="columns().length + (hasActions() ? 1 : 0)" class="py-6">
            <app-empty-state [title]="emptyTitle()" [description]="emptyDescription()" />
          </td>
        </tr>
        } @else { @for (row of data(); track row) {
        <tr
          (click)="onRowClick(row)"
          (keydown.enter)="onRowClick(row)"
          tabindex="0"
          class="hover:bg-gray-50/80 dark:hover:bg-slate-700/40 transition-colors cursor-pointer group focus:outline-none focus:bg-gray-100 dark:focus:bg-slate-700"
        >
          @for (col of columns(); track col.key) {
          <td
            [class.text-center]="col.align === 'center'"
            [class.text-right]="col.align === 'right'"
            class="px-4 py-3.5 font-normal"
          >
            @if (col.type === 'badge' || col.badgeConfig) { @let bg = getBadgeConfig(row, col);
            <app-badge [variant]="mapVariant(bg.variant)">
              @if (bg.icon) {
              <app-icon [name]="bg.icon" size="w-3 h-3" class="mr-1 inline" />
              } {{ bg.text }}
            </app-badge>
            } @else if (col.type === 'icon' || col.iconGetter) { @let iconName = col.iconGetter ?
            col.iconGetter(row) : 'box';
            <div
              class="inline-flex items-center justify-center w-7 h-7 rounded-md bg-gray-100 dark:bg-slate-700 text-gray-600 dark:text-slate-300"
            >
              <app-icon [name]="iconName" size="w-4 h-4" />
            </div>
            } @else { {{ getFormattedValue(row, col) }} }
          </td>
          } @if (hasActions()) {
          <td class="px-4 py-3.5 text-right" (click)="$event.stopPropagation()">
            <div class="inline-flex items-center justify-end gap-1">
              @for (act of getVisibleActions(row); track act.id) {
              <button
                type="button"
                (click)="onActionClick(act, row, $event)"
                [class]="'p-1.5 rounded transition-colors ' + (act.colorClass || 'text-gray-400 hover:text-[#4F8A6B] hover:bg-gray-100 dark:hover:bg-slate-700')"
                [title]="act.title || act.label"
              >
                <app-icon [name]="act.icon" size="w-4 h-4" />
              </button>
              }
            </div>
          </td>
          }
        </tr>
        } }
      </tbody>
    </table>
  </div>
</div>