Table

1
import { For } from "solid-js";
2
import {
3
  Table,
4
  TableBody,
5
  TableCaption,
6
  TableCell,
7
  TableFooter,
8
  TableHead,
9
  TableHeader,
10
  TableRow,
11
} from "~/components/ui/table";
12

13
const invoices = [
14
  {
15
    invoice: "INV001",
16
    paymentStatus: "Paid",
17
    totalAmount: "$250.00",
18
    paymentMethod: "Credit Card",
19
  },
20
  { invoice: "INV002", paymentStatus: "Pending", totalAmount: "$150.00", paymentMethod: "PayPal" },
21
  {
22
    invoice: "INV003",
23
    paymentStatus: "Unpaid",
24
    totalAmount: "$350.00",
25
    paymentMethod: "Bank Transfer",
26
  },
27
  {
28
    invoice: "INV004",
29
    paymentStatus: "Paid",
30
    totalAmount: "$450.00",
31
    paymentMethod: "Credit Card",
32
  },
33
  { invoice: "INV005", paymentStatus: "Paid", totalAmount: "$550.00", paymentMethod: "PayPal" },
34
  {
35
    invoice: "INV006",
36
    paymentStatus: "Pending",
37
    totalAmount: "$200.00",
38
    paymentMethod: "Bank Transfer",
39
  },
40
  {
41
    invoice: "INV007",
42
    paymentStatus: "Unpaid",
43
    totalAmount: "$300.00",
44
    paymentMethod: "Credit Card",
45
  },
46
];
47

48
export default function TableDemo() {
49
  return (
50
    <Table>
51
      <TableCaption>A list of your recent invoices.</TableCaption>
52
      <TableHeader>
53
        <TableRow>
54
          <TableHead class="w-[100px]">Invoice</TableHead>
55
          <TableHead>Status</TableHead>
56
          <TableHead>Method</TableHead>
57
          <TableHead class="text-right">Amount</TableHead>
58
        </TableRow>
59
      </TableHeader>
60
      <TableBody>
61
        <For each={invoices}>
62
          {(invoice) => (
63
            <TableRow>
64
              <TableCell class="font-medium">{invoice.invoice}</TableCell>
65
              <TableCell>{invoice.paymentStatus}</TableCell>
66
              <TableCell>{invoice.paymentMethod}</TableCell>
67
              <TableCell class="text-right">{invoice.totalAmount}</TableCell>
68
            </TableRow>
69
          )}
70
        </For>
71
      </TableBody>
72
      <TableFooter>
73
        <TableRow>
74
          <TableCell colSpan={3}>Total</TableCell>
75
          <TableCell class="text-right">$2,500.00</TableCell>
76
        </TableRow>
77
      </TableFooter>
78
    </Table>
79
  );
80
}

1
import { For } from "solid-js";
2
import {
3
  Table,
4
  TableBody,
5
  TableCaption,
6
  TableCell,
7
  TableFooter,
8
  TableHead,
9
  TableHeader,
10
  TableRow,
11
} from "~/components/ui/table";
12

13
const invoices = [
14
  {
15
    invoice: "INV001",
16
    paymentStatus: "Paid",
17
    totalAmount: "$250.00",
18
    paymentMethod: "Credit Card",
19
  },
20
  { invoice: "INV002", paymentStatus: "Pending", totalAmount: "$150.00", paymentMethod: "PayPal" },
21
  {
22
    invoice: "INV003",
23
    paymentStatus: "Unpaid",
24
    totalAmount: "$350.00",
25
    paymentMethod: "Bank Transfer",
26
  },
27
];
28

29
export default function TableFooterExample() {
30
  return (
31
    <Table>
32
      <TableCaption>A list of your recent invoices.</TableCaption>
33
      <TableHeader>
34
        <TableRow>
35
          <TableHead class="w-[100px]">Invoice</TableHead>
36
          <TableHead>Status</TableHead>
37
          <TableHead>Method</TableHead>
38
          <TableHead class="text-right">Amount</TableHead>
39
        </TableRow>
40
      </TableHeader>
41
      <TableBody>
42
        <For each={invoices}>
43
          {(invoice) => (
44
            <TableRow>
45
              <TableCell class="font-medium">{invoice.invoice}</TableCell>
46
              <TableCell>{invoice.paymentStatus}</TableCell>
47
              <TableCell>{invoice.paymentMethod}</TableCell>
48
              <TableCell class="text-right">{invoice.totalAmount}</TableCell>
49
            </TableRow>
50
          )}
51
        </For>
52
      </TableBody>
53
      <TableFooter>
54
        <TableRow>
55
          <TableCell colSpan={3}>Total</TableCell>
56
          <TableCell class="text-right">$2,500.00</TableCell>
57
        </TableRow>
58
      </TableFooter>
59
    </Table>
60
  );
61
}

1
import { MoreHorizontalIcon } from "lucide-solid";
2
import { For } from "solid-js";
3
import { Button } from "~/components/ui/button";
4
import {
5
  DropdownMenu,
6
  DropdownMenuContent,
7
  DropdownMenuItem,
8
  DropdownMenuSeparator,
9
  DropdownMenuTrigger,
10
} from "~/components/ui/dropdown-menu";
11
import {
12
  Table,
13
  TableBody,
14
  TableCell,
15
  TableHead,
16
  TableHeader,
17
  TableRow,
18
} from "~/components/ui/table";
19

20
const products = [
21
  { name: "Wireless Mouse", price: "$29.99" },
22
  { name: "Mechanical Keyboard", price: "$129.99" },
23
  { name: "USB-C Hub", price: "$49.99" },
24
];
25

26
export default function TableActions() {
27
  return (
28
    <Table>
29
      <TableHeader>
30
        <TableRow>
31
          <TableHead>Product</TableHead>
32
          <TableHead>Price</TableHead>
33
          <TableHead class="text-right">Actions</TableHead>
34
        </TableRow>
35
      </TableHeader>
36
      <TableBody>
37
        <For each={products}>
38
          {(product) => (
39
            <TableRow>
40
              <TableCell class="font-medium">{product.name}</TableCell>
41
              <TableCell>{product.price}</TableCell>
42
              <TableCell class="text-right">
43
                <DropdownMenu placement="bottom-end">
44
                  <DropdownMenuTrigger
45
                    as={Button}
46
                    variant="ghost"
47
                    size="icon"
48
                    class="size-8"
49
                    aria-label={`Open actions for ${product.name}`}
50
                  >
51
                    <MoreHorizontalIcon />
52
                  </DropdownMenuTrigger>
53
                  <DropdownMenuContent>
54
                    <DropdownMenuItem>Edit</DropdownMenuItem>
55
                    <DropdownMenuItem>Duplicate</DropdownMenuItem>
56
                    <DropdownMenuSeparator />
57
                    <DropdownMenuItem variant="destructive">Delete</DropdownMenuItem>
58
                  </DropdownMenuContent>
59
                </DropdownMenu>
60
              </TableCell>
61
            </TableRow>
62
          )}
63
        </For>
64
      </TableBody>
65
    </Table>
66
  );
67
}