table

A responsive table component for displaying structured data.

PreviousNext
A list of your recent invoices.
InvoiceStatusMethodAmount
INV001
 Paid Credit Card
$250.00
INV002
 Pending PayPal
$150.00
INV003
 Unpaid Bank Transfer
$350.00
INV004
 Paid Credit Card
$450.00
INV005
 Paid PayPal
$550.00
INV006
 Pending Bank Transfer
$200.00
INV007
 Unpaid Credit Card
$300.00
Total$2,250.00
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-preview',
  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>Invoice</th>
          <th z-table-head>Status</th>
          <th z-table-head>Method</th>
          <th z-table-head class="text-right">Amount</th>
        </tr>
      </thead>
      <tbody z-table-body>
        @for (invoice of invoices(); track invoice.id) {
          <tr z-table-row>
            <td z-table-cell>
              <div>{{ invoice.id }}</div>
            </td>
            <td z-table-cell>
              {{ invoice.status }}
            </td>
            <td z-table-cell>
              {{ invoice.method }}
            </td>
            <td z-table-cell>
              <div class="text-right 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-right">{{ formatCurrency(total()) }}</td>
        </tr>
      </tfoot>
    </table>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
  host: {
    class: 'block w-full overflow-x-auto',
  },
})
export class ZardDemoTablePreviewComponent {
  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,
    },
    {
      id: 'INV004',
      status: 'Paid',
      method: 'Credit Card',
      amount: 450,
    },
    {
      id: 'INV005',
      status: 'Paid',
      method: 'PayPal',
      amount: 550,
    },
    {
      id: 'INV006',
      status: 'Pending',
      method: 'Bank Transfer',
      amount: 200,
    },
    {
      id: 'INV007',
      status: 'Unpaid',
      method: 'Credit Card',
      amount: 300,
    },
  ]);

  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);
  }
}

Installation

Copy
npx zard-cli@latest add table

Usage

import { ZardTableImports } from '@/shared/components/table/table.imports';
Copy
<table z-table>
  <thead z-table-header>
    <tr z-table-row>
      <th z-table-head>Name</th>
      <th z-table-head>Status</th>
    </tr>
  </thead>
  <tbody z-table-body>
    <tr z-table-row>
      <td z-table-cell>Item 1</td>
      <td z-table-cell>Active</td>
    </tr>
  </tbody>
</table>
Copy

Composition

Use the following composition to build a table: 

z-table
├── caption[z-table-caption]
├── thead[z-table-header]
│   └── tr[z-table-row]
│       ├── th[z-table-head]
│       ├── th[z-table-head]
│       └── th[z-table-head]
├── tbody[z-table-body]
│   ├── tr[z-table-row]
│   │   ├── td[z-table-cell]
│   │   ├── td[z-table-cell]
│   │   └── td[z-table-cell]
│   └── tr[z-table-row]
│       ├── td[z-table-cell]
│       ├── td[z-table-cell]
│       └── td[z-table-cell]
└── tfoot[z-table-footer]
    └── tr[z-table-row]
        ├── td[z-table-cell]
        └── td[z-table-cell]
Copy

Examples

footer

InvoiceStatusMethodAmount
INV001
Paid
 Credit Card
$250.00
INV002
Pending
 PayPal
$150.00
INV003
Unpaid
 Bank Transfer
$350.00
Total$750.00
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>
      <thead z-table-header>
        <tr z-table-row>
          <th z-table-head>Invoice</th>
          <th z-table-head>Status</th>
          <th z-table-head>Method</th>
          <th z-table-head 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-right 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-right">{{ 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);
  }
}

actions

A table showing actions for each row using a <Dropdown /> component.
ProductPriceActions
Wireless Mouse29.99
Mechanical Keyboard129.99
USB-C Hub49.99
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>
      <thead z-table-header>
        <tr z-table-row>
          <th z-table-head>Product</th>
          <th z-table-head>Price</th>
          <th z-table-head class="text-right">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-right">
              <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,
    },
  ];
}

API Reference

[z-table]Component

A directive that accepts all properties supported by a native table. It automatically styles all nested table elements without requiring additional directives.

PropertyDescriptionTypeDefault
[zType] Table type 'default' | 'striped' | 'bordered' 'default'
[zSize] Table size 'default' | 'compact' | 'comfortable' 'default'

[z-table-header]Component

Applies styles to table header sections.

[z-table-body]Component

Applies styles to table body sections.

[z-table-row]Component

Applies styles to table rows.

[z-table-head]Component

Applies styles to table header cells.

[z-table-cell]Component

Applies styles to table data cells.

[z-table-caption]Component

Applies styles to table captions.

[z-table-footer]Component

Applies styles to table footer.

github iconwhatsapp icondiscord iconX icon

Made with ❤ in Brazil. Open source and available on GitHub .