{
  "name": "table",
  "type": "registry:component",
  "files": [
    {
      "name": "table.component.ts",
      "content": "import { ChangeDetectionStrategy, Component, computed, input, ViewEncapsulation } from '@angular/core';\n\nimport type { ClassValue } from 'clsx';\n\nimport {\n  type ZardTableSizeVariants,\n  type ZardTableTypeVariants,\n  tableBodyVariants,\n  tableCaptionVariants,\n  tableCellVariants,\n  tableFooterVariants,\n  tableHeaderVariants,\n  tableHeadVariants,\n  tableRowVariants,\n  tableVariants,\n} from '@/shared/components/table/table.variants';\nimport { mergeClasses } from '@/shared/utils/merge-classes';\n\n@Component({\n  selector: 'table[z-table]',\n  template: `\n    <ng-content />\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    '[class]': 'classes()',\n  },\n  exportAs: 'zTable',\n})\nexport class ZardTableComponent {\n  readonly zType = input<ZardTableTypeVariants>('default');\n  readonly zSize = input<ZardTableSizeVariants>('default');\n  readonly class = input<ClassValue>('');\n\n  protected readonly classes = computed(() =>\n    mergeClasses(\n      tableVariants({\n        zType: this.zType(),\n        zSize: this.zSize(),\n      }),\n      this.class(),\n    ),\n  );\n}\n\n@Component({\n  selector: 'thead[z-table-header]',\n  template: `\n    <ng-content />\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    '[class]': 'classes()',\n  },\n  exportAs: 'zTableHeader',\n})\nexport class ZardTableHeaderComponent {\n  readonly class = input<ClassValue>('');\n\n  protected readonly classes = computed(() => mergeClasses(tableHeaderVariants(), this.class()));\n}\n\n@Component({\n  selector: 'tbody[z-table-body]',\n  template: `\n    <ng-content />\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    '[class]': 'classes()',\n  },\n  exportAs: 'zTableBody',\n})\nexport class ZardTableBodyComponent {\n  readonly class = input<ClassValue>('');\n\n  protected readonly classes = computed(() => mergeClasses(tableBodyVariants(), this.class()));\n}\n\n@Component({\n  selector: 'tr[z-table-row]',\n  template: `\n    <ng-content />\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    '[class]': 'classes()',\n  },\n  exportAs: 'zTableRow',\n})\nexport class ZardTableRowComponent {\n  readonly class = input<ClassValue>('');\n\n  protected readonly classes = computed(() => mergeClasses(tableRowVariants(), this.class()));\n}\n\n@Component({\n  selector: 'th[z-table-head]',\n  template: `\n    <ng-content />\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    '[class]': 'classes()',\n  },\n  exportAs: 'zTableHead',\n})\nexport class ZardTableHeadComponent {\n  readonly class = input<ClassValue>('');\n\n  protected readonly classes = computed(() => mergeClasses(tableHeadVariants(), this.class()));\n}\n\n@Component({\n  selector: 'td[z-table-cell]',\n  template: `\n    <ng-content />\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    '[class]': 'classes()',\n  },\n  exportAs: 'zTableCell',\n})\nexport class ZardTableCellComponent {\n  readonly class = input<ClassValue>('');\n\n  protected readonly classes = computed(() => mergeClasses(tableCellVariants(), this.class()));\n}\n\n@Component({\n  selector: 'caption[z-table-caption]',\n  template: `\n    <ng-content />\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    '[class]': 'classes()',\n  },\n  exportAs: 'zTableCaption',\n})\nexport class ZardTableCaptionComponent {\n  readonly class = input<ClassValue>('');\n\n  protected readonly classes = computed(() => mergeClasses(tableCaptionVariants(), this.class()));\n}\n\n@Component({\n  selector: 'tfoot[z-table-footer]',\n  template: `\n    <ng-content />\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    '[class]': 'classes()',\n  },\n  exportAs: 'zTableFooter',\n})\nexport class ZardTableFooterComponent {\n  readonly class = input<ClassValue>('');\n\n  protected readonly classes = computed(() => mergeClasses(tableFooterVariants(), this.class()));\n}\n"
    },
    {
      "name": "table.imports.ts",
      "content": "import {\n  ZardTableComponent,\n  ZardTableHeaderComponent,\n  ZardTableBodyComponent,\n  ZardTableRowComponent,\n  ZardTableHeadComponent,\n  ZardTableCellComponent,\n  ZardTableCaptionComponent,\n  ZardTableFooterComponent,\n} from '@/shared/components/table/table.component';\n\nexport const ZardTableImports = [\n  ZardTableComponent,\n  ZardTableHeaderComponent,\n  ZardTableBodyComponent,\n  ZardTableRowComponent,\n  ZardTableHeadComponent,\n  ZardTableCellComponent,\n  ZardTableCaptionComponent,\n  ZardTableFooterComponent,\n] as const;\n"
    },
    {
      "name": "table.variants.ts",
      "content": "import { cva, type VariantProps } from 'class-variance-authority';\n\nexport const tableVariants = cva(\n  'w-full caption-bottom text-sm [&_thead_tr]:border-b [&_tbody]:border-0 [&_tbody_tr:last-child]:border-0 [&_tbody_tr]:border-b [&_tbody_tr]:transition-colors [&_tbody_tr]:hover:bg-muted/50 [&_tbody_tr]:data-[state=selected]:bg-muted [&_th]:h-10 [&_th]:px-2 [&_th]:align-middle [&_th]:font-medium [&_th]:text-muted-foreground [&_th:has([role=checkbox])]:pr-0 [&_th>[role=checkbox]]:translate-y-0.5 [&_td]:p-2 [&_td]:align-middle [&_td:has([role=checkbox])]:pr-0 [&_td>[role=checkbox]]:translate-y-0.5 [&_caption]:mt-4 [&_caption]:text-sm [&_caption]:text-muted-foreground',\n  {\n    variants: {\n      zType: {\n        default: '',\n        striped: '[&_tbody_tr:nth-child(odd)]:bg-muted/50',\n        bordered: 'border border-border',\n      },\n      zSize: {\n        default: '',\n        compact: '[&_td]:py-2 [&_th]:py-2',\n        comfortable: '[&_td]:py-4 [&_th]:py-4',\n      },\n    },\n    defaultVariants: {\n      zType: 'default',\n      zSize: 'default',\n    },\n  },\n);\n\nexport const tableHeaderVariants = cva('[&_tr]:border-b', {\n  variants: {},\n  defaultVariants: {},\n});\n\nexport const tableBodyVariants = cva('[&_tr:last-child]:border-0', {\n  variants: {},\n  defaultVariants: {},\n});\n\nexport const tableRowVariants = cva(\n  'border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted',\n  {\n    variants: {},\n    defaultVariants: {},\n  },\n);\n\nexport const tableHeadVariants = cva(\n  'h-10 px-2 text-left align-middle font-medium text-muted-foreground has-[[role=checkbox]]:pr-0 *:[[role=checkbox]]:translate-y-0.5',\n  {\n    variants: {},\n    defaultVariants: {},\n  },\n);\n\nexport const tableCellVariants = cva(\n  'p-2 align-middle has-[[role=checkbox]]:pr-0 *:[[role=checkbox]]:translate-y-0.5',\n  {\n    variants: {},\n    defaultVariants: {},\n  },\n);\n\nexport const tableCaptionVariants = cva('mt-4 text-sm text-muted-foreground', {\n  variants: {},\n  defaultVariants: {},\n});\n\nexport const tableFooterVariants = cva('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0');\n\nexport type ZardTableSizeVariants = NonNullable<VariantProps<typeof tableVariants>['zSize']>;\nexport type ZardTableTypeVariants = NonNullable<VariantProps<typeof tableVariants>['zType']>;\n"
    },
    {
      "name": "index.ts",
      "content": "export * from '@/shared/components/table/table.component';\nexport * from '@/shared/components/table/table.imports';\nexport * from '@/shared/components/table/table.variants';\n"
    }
  ],
  "demos": [
    {
      "name": "actions.ts",
      "content": "import { ChangeDetectionStrategy, Component } from '@angular/core';\n\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideEllipsis } from '@ng-icons/lucide';\n\nimport { ZardDropdownImports } from '@/shared/components/dropdown';\nimport { ZardTableImports } from '@/shared/components/table/table.imports';\n\ninterface Product {\n  id: number;\n  name: string;\n  price: number;\n}\n\n@Component({\n  selector: 'z-demo-table-actions',\n  imports: [ZardTableImports, ZardDropdownImports, NgIcon],\n  template: `\n    <table z-table>\n      <thead z-table-header>\n        <tr z-table-row>\n          <th z-table-head>Product</th>\n          <th z-table-head>Price</th>\n          <th z-table-head class=\"text-right\">Actions</th>\n        </tr>\n      </thead>\n      <tbody z-table-body>\n        @for (product of products; track product.id) {\n          <tr z-table-row>\n            <td z-table-cell class=\"font-medium\">{{ product.name }}</td>\n            <td z-table-cell>{{ product.price }}</td>\n            <td z-table-cell class=\"text-right\">\n              <button\n                z-button\n                z-dropdown\n                zType=\"ghost\"\n                zSize=\"icon\"\n                zAlign=\"end\"\n                type=\"button\"\n                aria-label=\"Open actions\"\n                [zDropdownMenu]=\"menu\"\n              >\n                <ng-icon name=\"lucideEllipsis\" aria-hidden=\"true\" />\n              </button>\n              <z-dropdown-menu-content #menu=\"zDropdownMenuContent\" class=\"w-30 -translate-x-[calc(100%-1.5rem)]\">\n                <z-dropdown-menu-item>Edit</z-dropdown-menu-item>\n                <z-dropdown-menu-item>Duplicate</z-dropdown-menu-item>\n                <z-dropdown-menu-separator class=\"block\" />\n                <z-dropdown-menu-item\n                  variant=\"destructive\"\n                  class=\"hover:text-destructive focus:text-destructive focus-visible:text-destructive data-highlighted:text-destructive\"\n                >\n                  Delete\n                </z-dropdown-menu-item>\n              </z-dropdown-menu-content>\n            </td>\n          </tr>\n        }\n      </tbody>\n    </table>\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  viewProviders: [provideIcons({ lucideEllipsis })],\n  host: {\n    class: 'block w-full overflow-x-auto',\n  },\n})\nexport class ZardDemoTableActionsComponent {\n  products: Product[] = [\n    {\n      id: 1,\n      name: 'Wireless Mouse',\n      price: 29.99,\n    },\n    {\n      id: 2,\n      name: 'Mechanical Keyboard',\n      price: 129.99,\n    },\n    {\n      id: 3,\n      name: 'USB-C Hub',\n      price: 49.99,\n    },\n  ];\n}\n"
    },
    {
      "name": "footer.ts",
      "content": "import { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';\n\nimport { ZardTableImports } from '@/shared/components/table/table.imports';\n\nexport interface Invoice {\n  id: string;\n  status: string;\n  method: string;\n  amount: number;\n}\n\n@Component({\n  selector: 'z-demo-table-footer',\n  imports: [ZardTableImports],\n  template: `\n    <table z-table>\n      <thead z-table-header>\n        <tr z-table-row>\n          <th z-table-head>Invoice</th>\n          <th z-table-head>Status</th>\n          <th z-table-head>Method</th>\n          <th z-table-head class=\"text-end\">Amount</th>\n        </tr>\n      </thead>\n      <tbody z-table-body>\n        @for (invoice of invoices(); track invoice.id) {\n          <tr z-table-row>\n            <td z-table-cell>{{ invoice.id }}</td>\n            <td z-table-cell>\n              <div>{{ invoice.status }}</div>\n            </td>\n\n            <td z-table-cell>\n              {{ invoice.method }}\n            </td>\n            <td z-table-cell>\n              <div class=\"text-right font-medium\">{{ formatCurrency(invoice.amount) }}</div>\n            </td>\n          </tr>\n        } @empty {\n          <tr z-table-row>\n            <td z-table-cell [attr.colspan]=\"4\" class=\"h-24 text-center\">No results.</td>\n          </tr>\n        }\n      </tbody>\n      <tfoot z-table-footer>\n        <tr z-table-row>\n          <td z-table-cell colspan=\"3\">Total</td>\n          <td z-table-cell class=\"text-right\">{{ formatCurrency(total()) }}</td>\n        </tr>\n      </tfoot>\n    </table>\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    class: 'block w-full overflow-x-auto',\n  },\n})\nexport class ZardDemoTableFooterComponent {\n  readonly invoices = signal<Invoice[]>([\n    {\n      id: 'INV001',\n      status: 'Paid',\n      method: 'Credit Card',\n      amount: 250,\n    },\n    {\n      id: 'INV002',\n      status: 'Pending',\n      method: 'PayPal',\n      amount: 150,\n    },\n    {\n      id: 'INV003',\n      status: 'Unpaid',\n      method: 'Bank Transfer',\n      amount: 350,\n    },\n  ]);\n\n  readonly total = computed(() =>\n    this.invoices().reduce((sum: number, invoice: { amount: number }) => sum + invoice.amount, 0),\n  );\n\n  formatCurrency(amount: number): string {\n    return new Intl.NumberFormat('en-US', {\n      style: 'currency',\n      currency: 'USD',\n    }).format(amount);\n  }\n}\n"
    },
    {
      "name": "preview.ts",
      "content": "import { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';\n\nimport { ZardTableImports } from '@/shared/components/table/table.imports';\n\nexport interface Invoice {\n  id: string;\n  status: string;\n  method: string;\n  amount: number;\n}\n\n@Component({\n  selector: 'z-demo-table-preview',\n  imports: [ZardTableImports],\n  template: `\n    <table z-table>\n      <caption z-table-caption>A list of your recent invoices.</caption>\n      <thead z-table-header>\n        <tr z-table-row>\n          <th z-table-head>Invoice</th>\n          <th z-table-head>Status</th>\n          <th z-table-head>Method</th>\n          <th z-table-head class=\"text-right\">Amount</th>\n        </tr>\n      </thead>\n      <tbody z-table-body>\n        @for (invoice of invoices(); track invoice.id) {\n          <tr z-table-row>\n            <td z-table-cell>\n              <div>{{ invoice.id }}</div>\n            </td>\n            <td z-table-cell>\n              {{ invoice.status }}\n            </td>\n            <td z-table-cell>\n              {{ invoice.method }}\n            </td>\n            <td z-table-cell>\n              <div class=\"text-right font-medium\">{{ formatCurrency(invoice.amount) }}</div>\n            </td>\n          </tr>\n        } @empty {\n          <tr z-table-row>\n            <td z-table-cell [attr.colspan]=\"4\" class=\"h-24 text-center\">No results.</td>\n          </tr>\n        }\n      </tbody>\n      <tfoot z-table-footer>\n        <tr z-table-row>\n          <td z-table-cell colspan=\"3\">Total</td>\n          <td z-table-cell class=\"text-right\">{{ formatCurrency(total()) }}</td>\n        </tr>\n      </tfoot>\n    </table>\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    class: 'block w-full overflow-x-auto',\n  },\n})\nexport class ZardDemoTablePreviewComponent {\n  readonly invoices = signal<Invoice[]>([\n    {\n      id: 'INV001',\n      status: 'Paid',\n      method: 'Credit Card',\n      amount: 250,\n    },\n    {\n      id: 'INV002',\n      status: 'Pending',\n      method: 'PayPal',\n      amount: 150,\n    },\n    {\n      id: 'INV003',\n      status: 'Unpaid',\n      method: 'Bank Transfer',\n      amount: 350,\n    },\n    {\n      id: 'INV004',\n      status: 'Paid',\n      method: 'Credit Card',\n      amount: 450,\n    },\n    {\n      id: 'INV005',\n      status: 'Paid',\n      method: 'PayPal',\n      amount: 550,\n    },\n    {\n      id: 'INV006',\n      status: 'Pending',\n      method: 'Bank Transfer',\n      amount: 200,\n    },\n    {\n      id: 'INV007',\n      status: 'Unpaid',\n      method: 'Credit Card',\n      amount: 300,\n    },\n  ]);\n\n  readonly total = computed(() =>\n    this.invoices().reduce((sum: number, invoice: { amount: number }) => sum + invoice.amount, 0),\n  );\n\n  formatCurrency(amount: number): string {\n    return new Intl.NumberFormat('en-US', {\n      style: 'currency',\n      currency: 'USD',\n    }).format(amount);\n  }\n}\n"
    },
    {
      "name": "simple.ts",
      "content": "import { Component } from '@angular/core';\n\nimport { ZardTableImports } from '@/shared/components/table/table.imports';\n\ninterface Person {\n  key: string;\n  name: string;\n  age: number;\n  address: string;\n}\n\n@Component({\n  selector: 'z-demo-table-simple',\n  imports: [ZardTableImports],\n  template: `\n    <table z-table>\n      <caption z-table-caption>A list of your recent invoices.</caption>\n      <thead z-table-header>\n        <tr z-table-row>\n          <th z-table-head>Name</th>\n          <th z-table-head>Age</th>\n          <th z-table-head>Address</th>\n        </tr>\n      </thead>\n      <tbody z-table-body>\n        @for (data of listOfData; track data.key) {\n          <tr z-table-row>\n            <td z-table-cell class=\"font-medium\">{{ data.name }}</td>\n            <td z-table-cell>{{ data.age }}</td>\n            <td z-table-cell>{{ data.address }}</td>\n          </tr>\n        }\n      </tbody>\n    </table>\n  `,\n})\nexport class ZardDemoTableSimpleComponent {\n  listOfData: Person[] = [\n    {\n      key: '1',\n      name: 'John Brown',\n      age: 32,\n      address: 'New York No. 1 Lake Park',\n    },\n    {\n      key: '2',\n      name: 'Jim Green',\n      age: 42,\n      address: 'London No. 1 Lake Park',\n    },\n    {\n      key: '3',\n      name: 'Joe Black',\n      age: 32,\n      address: 'Sidney No. 1 Lake Park',\n    },\n  ];\n}\n"
    }
  ]
}