Table

import {Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow} from '@stroeer-labs/design-library/react';

const invoices = [
    {invoice: 'INV001', paymentStatus: 'Paid', totalAmount: '$250.00', paymentMethod: 'Credit Card'},
    {invoice: 'INV002', paymentStatus: 'Pending', totalAmount: '$150.00', paymentMethod: 'PayPal'},
    {invoice: 'INV003', paymentStatus: 'Unpaid', totalAmount: '$350.00', paymentMethod: 'Bank Transfer'},
    {invoice: 'INV004', paymentStatus: 'Paid', totalAmount: '$450.00', paymentMethod: 'Credit Card'},
    {invoice: 'INV005', paymentStatus: 'Paid', totalAmount: '$550.00', paymentMethod: 'PayPal'},
];

export function TableDemo() {
    return (
        <Table>
            <TableCaption>A list of your recent invoices.</TableCaption>
            <TableHeader>
                <TableRow>
                    <TableHead className="w-[100px]">Invoice</TableHead>
                    <TableHead>Status</TableHead>
                    <TableHead>Method</TableHead>
                    <TableHead className="text-right">Amount</TableHead>
                </TableRow>
            </TableHeader>
            <TableBody>
                {invoices.map((invoice) => (
                    <TableRow key={invoice.invoice}>
                        <TableCell className="font-mono">{invoice.invoice}</TableCell>
                        <TableCell>{invoice.paymentStatus}</TableCell>
                        <TableCell>{invoice.paymentMethod}</TableCell>
                        <TableCell className="text-right font-mono tabular-nums">{invoice.totalAmount}</TableCell>
                    </TableRow>
                ))}
            </TableBody>
            <TableFooter>
                <TableRow>
                    <TableCell colSpan={3}>Total</TableCell>
                    <TableCell className="text-right font-mono tabular-nums">$1,750.00</TableCell>
                </TableRow>
            </TableFooter>
        </Table>
    );
}

import {Component} from '@angular/core';
import {HlmTableImports} from '@stroeer-labs/design-library/angular';

@Component({
    selector: 'dl-table-demo',
    standalone: true,
    imports: [HlmTableImports],
    template: `
    <div hlmTableContainer>
      <table hlmTable>
        <caption hlmTableCaption>A list of your recent invoices.</caption>
        <thead hlmTableHeader>
          <tr hlmTableRow>
            <th hlmTableHead class="w-[100px]">Invoice</th>
            <th hlmTableHead>Status</th>
            <th hlmTableHead>Method</th>
            <th hlmTableHead class="text-right">Amount</th>
          </tr>
        </thead>
        <tbody hlmTableBody>
          @for (invoice of invoices; track invoice.invoice) {
            <tr hlmTableRow>
              <td hlmTableCell class="font-mono">{{ invoice.invoice }}</td>
              <td hlmTableCell>{{ invoice.paymentStatus }}</td>
              <td hlmTableCell>{{ invoice.paymentMethod }}</td>
              <td hlmTableCell class="text-right font-mono tabular-nums">{{ invoice.totalAmount }}</td>
            </tr>
          }
        </tbody>
        <tfoot hlmTableFooter>
          <tr hlmTableRow>
            <td hlmTableCell [attr.colSpan]="3">Total</td>
            <td hlmTableCell class="text-right font-mono tabular-nums">$1,750.00</td>
          </tr>
        </tfoot>
      </table>
    </div>
  `,
})
export class TableDemoComponent {
    readonly invoices = [
        {invoice: 'INV001', paymentStatus: 'Paid', totalAmount: '$250.00', paymentMethod: 'Credit Card'},
        {invoice: 'INV002', paymentStatus: 'Pending', totalAmount: '$150.00', paymentMethod: 'PayPal'},
        {invoice: 'INV003', paymentStatus: 'Unpaid', totalAmount: '$350.00', paymentMethod: 'Bank Transfer'},
        {invoice: 'INV004', paymentStatus: 'Paid', totalAmount: '$450.00', paymentMethod: 'Credit Card'},
        {invoice: 'INV005', paymentStatus: 'Paid', totalAmount: '$550.00', paymentMethod: 'PayPal'},
    ];
}