complex

Table

A responsive table component.

Preview

A preview of the Table component with interactive controls.

Preview Code
Interactive

Installation

Add the Table component to your project.

Bash
ng g @ng-cn/core:c table

Usage

Import and use the Table component in your Angular application.

Template TypeScript
template.html
<Table>
  <TableCaption>A list of your recent invoices.</TableCaption>
  <TableHeader>
    <TableRow>
      <TableHead class="w-[100px]">Invoice</TableHead>
      <TableHead>Status</TableHead>
      <TableHead>Method</TableHead>
      <TableHead class="text-right">Amount</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell class="font-medium">INV001</TableCell>
      <TableCell>Paid</TableCell>
      <TableCell>Credit Card</TableCell>
      <TableCell class="text-right">$250.00</TableCell>
    </TableRow>
    <TableRow>
      <TableCell class="font-medium">INV002</TableCell>
      <TableCell>Pending</TableCell>
      <TableCell>PayPal</TableCell>
      <TableCell class="text-right">$150.00</TableCell>
    </TableRow>
  </TableBody>
</Table>

Examples

Explore different variations and use cases for the Table component.

Basic

Preview Code
Interactive

API Reference

Props
Prop Type Default Description
class string — Additional CSS classes to apply.