table

1import { ChangeDetectionStrategy, Component, computed, input, ViewEncapsulation } from '@angular/core';
2 
3import type { ClassValue } from 'clsx';
4 
5import {
6  type ZardTableSizeVariants,
7  type ZardTableTypeVariants,
8  tableBodyVariants,
9  tableCaptionVariants,
10  tableCellVariants,
11  tableFooterVariants,
12  tableHeaderVariants,
13  tableHeadVariants,
14  tableRowVariants,
15  tableVariants,
16} from '@/shared/components/table/table.variants';
17import { mergeClasses } from '@/shared/utils/merge-classes';
18 
19@Component({
20  selector: 'table[z-table]',
21  template: `
22    <ng-content />
23  `,
24  changeDetection: ChangeDetectionStrategy.OnPush,
25  encapsulation: ViewEncapsulation.None,
26  host: {
27    '[class]': 'classes()',
28  },
29  exportAs: 'zTable',
30})
31export class ZardTableComponent {
32  readonly zType = input<ZardTableTypeVariants>('default');
33  readonly zSize = input<ZardTableSizeVariants>('default');
34  readonly class = input<ClassValue>('');
35 
36  protected readonly classes = computed(() =>
37    mergeClasses(
38      tableVariants({
39        zType: this.zType(),
40        zSize: this.zSize(),
41      }),
42      this.class(),
43    ),
44  );
45}
46 
47@Component({
48  selector: 'thead[z-table-header]',
49  template: `
50    <ng-content />
51  `,
52  changeDetection: ChangeDetectionStrategy.OnPush,
53  encapsulation: ViewEncapsulation.None,
54  host: {
55    '[class]': 'classes()',
56  },
57  exportAs: 'zTableHeader',
58})
59export class ZardTableHeaderComponent {
60  readonly class = input<ClassValue>('');
61 
62  protected readonly classes = computed(() => mergeClasses(tableHeaderVariants(), this.class()));
63}
64 
65@Component({
66  selector: 'tbody[z-table-body]',
67  template: `
68    <ng-content />
69  `,
70  changeDetection: ChangeDetectionStrategy.OnPush,
71  encapsulation: ViewEncapsulation.None,
72  host: {
73    '[class]': 'classes()',
74  },
75  exportAs: 'zTableBody',
76})
77export class ZardTableBodyComponent {
78  readonly class = input<ClassValue>('');
79 
80  protected readonly classes = computed(() => mergeClasses(tableBodyVariants(), this.class()));
81}
82 
83@Component({
84  selector: 'tr[z-table-row]',
85  template: `
86    <ng-content />
87  `,
88  changeDetection: ChangeDetectionStrategy.OnPush,
89  encapsulation: ViewEncapsulation.None,
90  host: {
91    '[class]': 'classes()',
92  },
93  exportAs: 'zTableRow',
94})
95export class ZardTableRowComponent {
96  readonly class = input<ClassValue>('');
97 
98  protected readonly classes = computed(() => mergeClasses(tableRowVariants(), this.class()));
99}
100 
101@Component({
102  selector: 'th[z-table-head]',
103  template: `
104    <ng-content />
105  `,
106// … truncated