table

import { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';

import { ZardTableImports } from '@/shared/components/table/table.imports';

export interface Invoice {
  id: string;
  status: string;
  method: string;
  amount: number;
}

@Component({
  selector: 'z-demo-table-footer',
  imports: [ZardTableImports],
  template: `
    <table z-table>
      <caption z-table-caption>A list of your recent invoices.</caption>
      <thead z-table-header>
        <tr z-table-row>
          <th z-table-head scope="col">Invoice</th>
          <th z-table-head scope="col">Status</th>
          <th z-table-head scope="col">Method</th>
          <th z-table-head scope="col" class="text-end">Amount</th>
        </tr>
      </thead>
      <tbody z-table-body>
        @for (invoice of invoices(); track invoice.id) {
          <tr z-table-row>
            <td z-table-cell>{{ invoice.id }}</td>
            <td z-table-cell>
              <div>{{ invoice.status }}</div>
            </td>

            <td z-table-cell>
              {{ invoice.method }}
            </td>
            <td z-table-cell>
              <div class="text-end font-medium">{{ formatCurrency(invoice.amount) }}</div>
            </td>
          </tr>
        } @empty {
          <tr z-table-row>
            <td z-table-cell [attr.colspan]="4" class="h-24 text-center">No results.</td>
          </tr>
        }
      </tbody>
      <tfoot z-table-footer>
        <tr z-table-row>
          <td z-table-cell colspan="3">Total</td>
          <td z-table-cell class="text-end">{{ formatCurrency(total()) }}</td>
        </tr>
      </tfoot>
    </table>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
  host: {
    class: 'block w-full overflow-x-auto',
  },
})
export class ZardDemoTableFooterComponent {
  readonly invoices = signal<Invoice[]>([
    {
      id: 'INV001',
      status: 'Paid',
      method: 'Credit Card',
      amount: 250,
    },
    {
      id: 'INV002',
      status: 'Pending',
      method: 'PayPal',
      amount: 150,
    },
    {
      id: 'INV003',
      status: 'Unpaid',
      method: 'Bank Transfer',
      amount: 350,
    },
  ]);

  readonly total = computed(() =>
    this.invoices().reduce((sum: number, invoice: { amount: number }) => sum + invoice.amount, 0),
  );

  formatCurrency(amount: number): string {
    return new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency: 'USD',
    }).format(amount);
  }
}

import { ChangeDetectionStrategy, Component } from '@angular/core';

import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideEllipsis } from '@ng-icons/lucide';

import { ZardDropdownImports } from '@/shared/components/dropdown';
import { ZardTableImports } from '@/shared/components/table/table.imports';

interface Product {
  id: number;
  name: string;
  price: number;
}

@Component({
  selector: 'z-demo-table-actions',
  imports: [ZardTableImports, ZardDropdownImports, NgIcon],
  template: `
    <table z-table aria-label="Products and their actions">
      <thead z-table-header>
        <tr z-table-row>
          <th z-table-head scope="col">Product</th>
          <th z-table-head scope="col">Price</th>
          <th z-table-head scope="col" class="text-end">Actions</th>
        </tr>
      </thead>
      <tbody z-table-body>
        @for (product of products; track product.id) {
          <tr z-table-row>
            <td z-table-cell class="font-medium">{{ product.name }}</td>
            <td z-table-cell>{{ product.price }}</td>
            <td z-table-cell class="text-end">
              <button
                z-button
                z-dropdown
                zType="ghost"
                zSize="icon"
                zAlign="end"
                type="button"
                aria-label="Open actions"
                [zDropdownMenu]="menu"
              >
                <ng-icon name="lucideEllipsis" aria-hidden="true" />
              </button>
              <z-dropdown-menu-content #menu="zDropdownMenuContent" class="w-30 -translate-x-[calc(100%-1.5rem)]">
                <z-dropdown-menu-item>Edit</z-dropdown-menu-item>
                <z-dropdown-menu-item>Duplicate</z-dropdown-menu-item>
                <z-dropdown-menu-separator class="block" />
                <z-dropdown-menu-item
                  variant="destructive"
                  class="hover:text-destructive focus:text-destructive focus-visible:text-destructive data-highlighted:text-destructive"
                >
                  Delete
                </z-dropdown-menu-item>
              </z-dropdown-menu-content>
            </td>
          </tr>
        }
      </tbody>
    </table>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
  viewProviders: [provideIcons({ lucideEllipsis })],
  host: {
    class: 'block w-full overflow-x-auto',
  },
})
export class ZardDemoTableActionsComponent {
  products: Product[] = [
    {
      id: 1,
      name: 'Wireless Mouse',
      price: 29.99,
    },
    {
      id: 2,
      name: 'Mechanical Keyboard',
      price: 129.99,
    },
    {
      id: 3,
      name: 'USB-C Hub',
      price: 49.99,
    },
  ];
}

import { ChangeDetectionStrategy, Component } from '@angular/core';

import { ZardTableImports } from '@/shared/components/table/table.imports';

interface Person {
  key: string;
  name: string;
  age: number;
  address: string;
}

@Component({
  selector: 'z-demo-table-simple',
  imports: [ZardTableImports],
  template: `
    <table z-table>
      <caption z-table-caption>A list of registered users.</caption>
      <thead z-table-header>
        <tr z-table-row>
          <th z-table-head scope="col">Name</th>
          <th z-table-head scope="col">Age</th>
          <th z-table-head scope="col">Address</th>
        </tr>
      </thead>
      <tbody z-table-body>
        @for (data of listOfData; track data.key) {
          <tr z-table-row>
            <td z-table-cell class="font-medium">{{ data.name }}</td>
            <td z-table-cell>{{ data.age }}</td>
            <td z-table-cell>{{ data.address }}</td>
          </tr>
        }
      </tbody>
    </table>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
  host: {
    class: 'block w-full overflow-x-auto',
  },
})
export class ZardDemoTableSimpleComponent {
  listOfData: Person[] = [
    {
      key: '1',
      name: 'John Brown',
      age: 32,
      address: 'New York No. 1 Lake Park',
    },
    {
      key: '2',
      name: 'Jim Green',
      age: 42,
      address: 'London No. 1 Lake Park',
    },
    {
      key: '3',
      name: 'Joe Black',
      age: 32,
      address: 'Sidney No. 1 Lake Park',
    },
  ];
}

// You will notice this example is rendered inside a wrapper that sets the dir and data-lang attributes, and
// reads its text from a translations helper. This is because this site is not RTL by default.
// In your application you won't need either: set dir="rtl" on <html> (or use the CDK Dir directive on a subtree)
// and write the text of your own language. See the RTL guide: https://zardui.com/docs/rtl

import { ChangeDetectionStrategy, Component } from '@angular/core';

import { ZardTableImports } from '@/shared/components/table/table.imports';
import { injectRtlTranslation, type ZardRtlTranslations } from '@/shared/demo-utils/rtl-translation';

const translations: ZardRtlTranslations<{
  caption: string;
  name: string;
  status: string;
  amount: string;
  paid: string;
  pending: string;
}> = {
  en: {
    dir: 'ltr',
    values: {
      caption: 'A list of recent invoices.',
      name: 'Invoice',
      status: 'Status',
      amount: 'Amount',
      paid: 'Paid',
      pending: 'Pending',
    },
  },
  ar: {
    dir: 'rtl',
    values: {
      caption: 'قائمة بأحدث الفواتير.',
      name: 'الفاتورة',
      status: 'الحالة',
      amount: 'المبلغ',
      paid: 'مدفوعة',
      pending: 'قيد الانتظار',
    },
  },
  he: {
    dir: 'rtl',
    values: {
      caption: 'רשימת חשבוניות אחרונות.',
      name: 'חשבונית',
      status: 'סטטוס',
      amount: 'סכום',
      paid: 'שולם',
      pending: 'ממתין',
    },
  },
};

@Component({
  selector: 'z-demo-table-rtl',
  imports: [ZardTableImports],
  template: `
    <table z-table>
      <caption z-table-caption>{{ i18n.t().caption }}</caption>
      <thead z-table-header>
        <tr z-table-row>
          <th z-table-head scope="col">{{ i18n.t().name }}</th>
          <th z-table-head scope="col">{{ i18n.t().status }}</th>
          <th z-table-head scope="col" class="text-end">{{ i18n.t().amount }}</th>
        </tr>
      </thead>
      <tbody z-table-body>
        @for (invoice of invoices; track invoice.id) {
          <tr z-table-row>
            <td z-table-cell class="font-medium">{{ invoice.id }}</td>
            <td z-table-cell>{{ invoice.paid ? i18n.t().paid : i18n.t().pending }}</td>
            <td z-table-cell class="text-end">{{ invoice.amount }}</td>
          </tr>
        }
      </tbody>
    </table>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ZardDemoTableRtlComponent {
  protected readonly i18n = injectRtlTranslation(translations);

  protected readonly invoices = [
    { id: 'INV001', paid: true, amount: '$250.00' },
    { id: 'INV002', paid: false, amount: '$150.00' },
    { id: 'INV003', paid: true, amount: '$350.00' },
  ];
}