table

Displays data in a structured table format with styling variants and semantic HTML structure.

PreviousNext
A list of your recent invoices.
NameAgeAddress
John Brown32New York No. 1 Lake Park
Jim Green42London No. 1 Lake Park
Joe Black32Sidney No. 1 Lake Park
import { Component } from '@angular/core';

import { ZardTableComponent } from '../table.component';

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

@Component({
  selector: 'z-demo-table-simple',
  imports: [ZardTableComponent],
  standalone: true,
  template: `
    <table z-table>
      <caption>A list of your recent invoices.</caption>
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
          <th>Address</th>
        </tr>
      </thead>
      <tbody>
        @for (data of listOfData; track data.key) {
          <tr>
            <td class="font-medium">{{ data.name }}</td>
            <td>{{ data.age }}</td>
            <td>{{ data.address }}</td>
          </tr>
        }
      </tbody>
    </table>
  `,
})
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',
    },
  ];
}

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

Examples

simple

A list of your recent invoices.
NameAgeAddress
John Brown32New York No. 1 Lake Park
Jim Green42London No. 1 Lake Park
Joe Black32Sidney No. 1 Lake Park
import { Component } from '@angular/core';

import { ZardTableComponent } from '../table.component';

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

@Component({
  selector: 'z-demo-table-simple',
  imports: [ZardTableComponent],
  standalone: true,
  template: `
    <table z-table>
      <caption>A list of your recent invoices.</caption>
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
          <th>Address</th>
        </tr>
      </thead>
      <tbody>
        @for (data of listOfData; track data.key) {
          <tr>
            <td class="font-medium">{{ data.name }}</td>
            <td>{{ data.age }}</td>
            <td>{{ data.address }}</td>
          </tr>
        }
      </tbody>
    </table>
  `,
})
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',
    },
  ];
}

payments

StatusEmailAmountActions
success
ken99@example.com
$316.00
success
Abe45@example.com
$242.00
processing
Monserrat44@example.com
$837.00
success
Silas22@example.com
$874.00
failed
carmella@example.com
$721.00
pending
jane.doe@example.com
$456.00
import { ChangeDetectionStrategy, Component } from '@angular/core';

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

import { ZardBadgeComponent } from '@/shared/components/badge/badge.component';
import { ZardButtonComponent } from '@/shared/components/button/button.component';
import { ZardTableImports } from '@/shared/components/table/table.imports';

export interface Payment {
  id: string;
  amount: number;
  status: 'pending' | 'processing' | 'success' | 'failed';
  email: string;
}

@Component({
  selector: 'z-demo-table-payments',
  imports: [ZardTableImports, ZardBadgeComponent, ZardButtonComponent, NgIcon],
  template: `
    <div class="w-full">
      <div class="overflow-hidden rounded-md border">
        <table z-table>
          <thead z-table-header>
            <tr z-table-row>
              <th z-table-head>Status</th>
              <th z-table-head>Email</th>
              <th z-table-head class="text-right">Amount</th>
              <th z-table-head class="w-16">Actions</th>
            </tr>
          </thead>
          <tbody z-table-body>
            @for (payment of payments; track payment.id) {
              <tr z-table-row>
                <td z-table-cell>
                  <z-badge [zType]="getStatusVariant(payment.status)">
                    {{ payment.status }}
                  </z-badge>
                </td>
                <td z-table-cell>
                  <div class="lowercase">{{ payment.email }}</div>
                </td>
                <td z-table-cell>
                  <div class="text-right font-medium">{{ formatCurrency(payment.amount) }}</div>
                </td>
                <td z-table-cell>
                  <div class="flex items-center gap-2">
                    <z-button zType="ghost" (click)="copyPaymentId(payment.id)" title="Copy payment ID">
                      <ng-icon name="lucideCopy" />
                    </z-button>
                    <z-button zType="ghost" (click)="viewDetails(payment)" title="View details">
                      <ng-icon name="lucideEye" />
                    </z-button>
                  </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>
        </table>
      </div>
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
  viewProviders: [provideIcons({ lucideCopy, lucideEye })],
})
export class ZardDemoTablePaymentsComponent {
  payments: Payment[] = [
    {
      id: 'm5gr84i9',
      amount: 316,
      status: 'success',
      email: 'ken99@example.com',
    },
    {
      id: '3u1reuv4',
      amount: 242,
      status: 'success',
      email: 'Abe45@example.com',
    },
    {
      id: 'derv1ws0',
      amount: 837,
      status: 'processing',
      email: 'Monserrat44@example.com',
    },
    {
      id: '5kma53ae',
      amount: 874,
      status: 'success',
      email: 'Silas22@example.com',
    },
    {
      id: 'bhqecj4p',
      amount: 721,
      status: 'failed',
      email: 'carmella@example.com',
    },
    {
      id: 'abc123ef',
      amount: 456,
      status: 'pending',
      email: 'jane.doe@example.com',
    },
  ];

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

  getStatusVariant(status: Payment['status']): 'default' | 'secondary' | 'destructive' | 'outline' {
    switch (status) {
      case 'success':
        return 'default';
      case 'processing':
        return 'secondary';
      case 'failed':
        return 'destructive';
      case 'pending':
        return 'outline';
      default:
        return 'secondary';
    }
  }

  copyPaymentId(id: string): void {
    navigator.clipboard.writeText(id);
    console.log('Payment ID copied:', id);
  }

  viewDetails(payment: Payment): void {
    console.log('View payment details:', payment);
  }
}

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.

PropertyDescriptionTypeDefault

[z-table-body]Component

Applies styles to table body sections.

PropertyDescriptionTypeDefault

[z-table-row]Component

Applies styles to table rows.

PropertyDescriptionTypeDefault

[z-table-head]Component

Applies styles to table header cells.

PropertyDescriptionTypeDefault

[z-table-cell]Component

Applies styles to table data cells.

PropertyDescriptionTypeDefault

[z-table-caption]Component

Applies styles to table captions.

PropertyDescriptionTypeDefault
github iconwhatsapp icondiscord iconX icon

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