angular-reccos-shop/src/app/design-system/data-table/data-table.html at bd5eea587371203e3dd990622b2d7b58ac86c604 · 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
98
99
100
101
<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.cell) {
                    {{ col.cell(row) }}
                  } @else {
                    {{ row[col.key] }}
                  }
                </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">
                    <button
                      type="button"
                      (click)="onEdit(row)"
                      class="p-1 rounded text-gray-400 hover:text-[#4F8A6B] hover:bg-gray-100 dark:hover:bg-slate-700 transition-colors"
                      title="Editar"
                    >
                      <app-icon name="edit" size="w-4 h-4" />
                    </button>
                    <button
                      type="button"
                      (click)="onDelete(row)"
                      class="p-1 rounded text-gray-400 hover:text-[#D66A6A] hover:bg-gray-100 dark:hover:bg-slate-700 transition-colors"
                      title="Excluir"
                    >
                      <app-icon name="trash-2" size="w-4 h-4" />
                    </button>
                  </div>
                </td>
              }
            </tr>
          }
        }
      </tbody>
    </table>
  </div>
</div>