Table

1'use client';
2
3import { Table } from '@/components/ui/table';
4
5const invoices = [
6  {
7    invoice: 'INV001',
8    paymentStatus: 'Paid',
9    totalAmount: '$250.00',
10    paymentMethod: 'Credit Card',
11  },
12  {
13    invoice: 'INV002',
14    paymentStatus: 'Pending',
15    totalAmount: '$150.00',
16    paymentMethod: 'PayPal',
17  },
18  {
19    invoice: 'INV003',
20    paymentStatus: 'Unpaid',
21    totalAmount: '$350.00',
22    paymentMethod: 'Bank Transfer',
23  },
24  {
25    invoice: 'INV004',
26    paymentStatus: 'Paid',
27    totalAmount: '$450.00',
28    paymentMethod: 'Credit Card',
29  },
30  {
31    invoice: 'INV005',
32    paymentStatus: 'Paid',
33    totalAmount: '$550.00',
34    paymentMethod: 'PayPal',
35  },
36];
37
38export function Default() {
39  return (
40    <Table>
41      <Table.Header>
42        <Table.Row>
43          <Table.Head className="w-[100px]">Invoice</Table.Head>
44          <Table.Head>Status</Table.Head>
45          <Table.Head>Method</Table.Head>
46          <Table.Head className="text-right">Amount</Table.Head>
47        </Table.Row>
48      </Table.Header>
49      <Table.Body>
50        {invoices.map((invoice) => (
51          <Table.Row key={invoice.invoice}>
52            <Table.Cell className="font-medium">{invoice.invoice}</Table.Cell>
53            <Table.Cell>{invoice.paymentStatus}</Table.Cell>
54            <Table.Cell>{invoice.paymentMethod}</Table.Cell>
55            <Table.Cell className="text-right">{invoice.totalAmount}</Table.Cell>
56          </Table.Row>
57        ))}
58      </Table.Body>
59      <Table.Footer>
60        <Table.Row>
61          <Table.Cell colSpan={3}>Total</Table.Cell>
62          <Table.Cell className="text-right">$1,750.00</Table.Cell>
63        </Table.Row>
64      </Table.Footer>
65    </Table>
66  );
67}

1'use client';
2
3import { Button } from '@/components/ui/button';
4import { Table } from '@/components/ui/table';
5
6const invoices = [
7  {
8    invoice: 'INV001',
9    paymentStatus: 'Paid',
10    totalAmount: '$250.00',
11    paymentMethod: 'Credit Card',
12  },
13  { invoice: 'INV002', paymentStatus: 'Pending', totalAmount: '$150.00', paymentMethod: 'PayPal' },
14  {
15    invoice: 'INV003',
16    paymentStatus: 'Unpaid',
17    totalAmount: '$350.00',
18    paymentMethod: 'Bank Transfer',
19  },
20];
21
22export function WithActions() {
23  return (
24    <Table>
25      <Table.Caption>A list of your recent invoices with actions.</Table.Caption>
26      <Table.Header>
27        <Table.Row>
28          <Table.Head className="w-[100px]">Invoice</Table.Head>
29          <Table.Head>Status</Table.Head>
30          <Table.Head>Method</Table.Head>
31          <Table.Head className="text-right">Amount</Table.Head>
32          <Table.Head className="text-right">Actions</Table.Head>
33        </Table.Row>
34      </Table.Header>
35      <Table.Body>
36        {invoices.map((invoice) => (
37          <Table.Row key={invoice.invoice}>
38            <Table.Cell className="font-medium">{invoice.invoice}</Table.Cell>
39            <Table.Cell>{invoice.paymentStatus}</Table.Cell>
40            <Table.Cell>{invoice.paymentMethod}</Table.Cell>
41            <Table.Cell className="text-right">{invoice.totalAmount}</Table.Cell>
42            <Table.Cell className="text-right">
43              <div className="flex justify-end gap-2">
44                <Button variant="ghost" className="h-8 px-2 text-xs">
45                  Edit
46                </Button>
47                <Button
48                  variant="ghost"
49                  className="text-destructive hover:text-destructive h-8 px-2 text-xs"
50                >
51                  Delete
52                </Button>
53              </div>
54            </Table.Cell>
55          </Table.Row>
56        ))}
57      </Table.Body>
58    </Table>
59  );
60}

1'use client';
2
3import { Table } from '@/components/ui/table';
4
5const invoices = [
6  {
7    invoice: 'INV001',
8    paymentStatus: 'Paid',
9    totalAmount: '$250.00',
10    paymentMethod: 'Credit Card',
11  },
12  { invoice: 'INV002', paymentStatus: 'Pending', totalAmount: '$150.00', paymentMethod: 'PayPal' },
13  {
14    invoice: 'INV003',
15    paymentStatus: 'Unpaid',
16    totalAmount: '$350.00',
17    paymentMethod: 'Bank Transfer',
18  },
19  {
20    invoice: 'INV004',
21    paymentStatus: 'Paid',
22    totalAmount: '$450.00',
23    paymentMethod: 'Credit Card',
24  },
25];
26
27export function Striped() {
28  return (
29    <Table>
30      <Table.Caption>A striped list of your recent invoices.</Table.Caption>
31      <Table.Header>
32        <Table.Row>
33          <Table.Head className="w-[100px]">Invoice</Table.Head>
34          <Table.Head>Status</Table.Head>
35          <Table.Head>Method</Table.Head>
36          <Table.Head className="text-right">Amount</Table.Head>
37        </Table.Row>
38      </Table.Header>
39      <Table.Body>
40        {invoices.map((invoice, index) => (
41          <Table.Row key={invoice.invoice} className={index % 2 === 0 ? 'bg-muted/30' : ''}>
42            <Table.Cell className="font-medium">{invoice.invoice}</Table.Cell>
43            <Table.Cell>{invoice.paymentStatus}</Table.Cell>
44            <Table.Cell>{invoice.paymentMethod}</Table.Cell>
45            <Table.Cell className="text-right">{invoice.totalAmount}</Table.Cell>
46          </Table.Row>
47        ))}
48      </Table.Body>
49    </Table>
50  );
51}

1'use client';
2
3import { Table } from '@/components/ui/table';
4
5const invoices = [
6  {
7    invoice: 'INV001',
8    paymentStatus: 'Paid',
9    totalAmount: '$250.00',
10    paymentMethod: 'Credit Card',
11  },
12  { invoice: 'INV002', paymentStatus: 'Pending', totalAmount: '$150.00', paymentMethod: 'PayPal' },
13  {
14    invoice: 'INV003',
15    paymentStatus: 'Unpaid',
16    totalAmount: '$350.00',
17    paymentMethod: 'Bank Transfer',
18  },
19];
20
21export function Compact() {
22  return (
23    <Table>
24      <Table.Header>
25        <Table.Row>
26          <Table.Head className="h-auto py-2 text-xs">Invoice</Table.Head>
27          <Table.Head className="h-auto py-2 text-xs">Status</Table.Head>
28          <Table.Head className="h-auto py-2 text-xs">Method</Table.Head>
29          <Table.Head className="h-auto py-2 text-right text-xs">Amount</Table.Head>
30        </Table.Row>
31      </Table.Header>
32      <Table.Body>
33        {invoices.map((invoice) => (
34          <Table.Row key={invoice.invoice}>
35            <Table.Cell className="py-2 font-medium">{invoice.invoice}</Table.Cell>
36            <Table.Cell className="py-2">{invoice.paymentStatus}</Table.Cell>
37            <Table.Cell className="py-2">{invoice.paymentMethod}</Table.Cell>
38            <Table.Cell className="py-2 text-right">{invoice.totalAmount}</Table.Cell>
39          </Table.Row>
40        ))}
41      </Table.Body>
42    </Table>
43  );
44}