Table

A responsive table component with compound parts for header, body, footer, and caption.

A list of your recent invoices.
Invoice	Status	Method	Amount
INV001	Paid	Credit Card	$250.00
INV002	Pending	PayPal	$150.00
INV003	Unpaid	Bank Transfer	$350.00
INV004	Paid	Credit Card	$450.00
INV005	Paid	PayPal	$550.00
INV006	Pending	Bank Transfer	$200.00
INV007	Unpaid	Credit Card	$300.00
Total			$2,500.00

1
---
2
import { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from '@bejamas/ui/components/table';
3
---
4

5
<Table>
6
  <TableCaption>A list of your recent invoices.</TableCaption>
7
  <TableHeader>
8
    <TableRow>
9
      <TableHead class="w-[100px]">Invoice</TableHead>
10
      <TableHead>Status</TableHead>
11
      <TableHead>Method</TableHead>
12
      <TableHead class="text-right">Amount</TableHead>
13
    </TableRow>
14
  </TableHeader>
15
  <TableBody>
16
    <TableRow>
17
      <TableCell class="font-medium">INV001</TableCell>
18
      <TableCell>Paid</TableCell>
19
      <TableCell>Credit Card</TableCell>
20
      <TableCell class="text-right">$250.00</TableCell>
21
    </TableRow>
22
    <TableRow>
23
      <TableCell class="font-medium">INV002</TableCell>
24
      <TableCell>Pending</TableCell>
25
      <TableCell>PayPal</TableCell>
26
      <TableCell class="text-right">$150.00</TableCell>
27
    </TableRow>
28
    <TableRow>
29
      <TableCell class="font-medium">INV003</TableCell>
30
      <TableCell>Unpaid</TableCell>
31
      <TableCell>Bank Transfer</TableCell>
32
      <TableCell class="text-right">$350.00</TableCell>
33
    </TableRow>
34
    <TableRow>
35
      <TableCell class="font-medium">INV004</TableCell>
36
      <TableCell>Paid</TableCell>
37
      <TableCell>Credit Card</TableCell>
38
      <TableCell class="text-right">$450.00</TableCell>
39
    </TableRow>
40
    <TableRow>
41
      <TableCell class="font-medium">INV005</TableCell>
42
      <TableCell>Paid</TableCell>
43
      <TableCell>PayPal</TableCell>
44
      <TableCell class="text-right">$550.00</TableCell>
45
    </TableRow>
46
    <TableRow>
47
      <TableCell class="font-medium">INV006</TableCell>
48
      <TableCell>Pending</TableCell>
49
      <TableCell>Bank Transfer</TableCell>
50
      <TableCell class="text-right">$200.00</TableCell>
51
    </TableRow>
52
    <TableRow>
53
      <TableCell class="font-medium">INV007</TableCell>
54
      <TableCell>Unpaid</TableCell>
55
      <TableCell>Credit Card</TableCell>
56
      <TableCell class="text-right">$300.00</TableCell>
57
    </TableRow>
58
  </TableBody>
59
  <TableFooter>
60
    <TableRow>
61
      <TableCell colspan={3}>Total</TableCell>
62
      <TableCell class="text-right">$2,500.00</TableCell>
63
    </TableRow>
64
  </TableFooter>
65
</Table>

Installation

bunx bejamas add table

npx bejamas add table

pnpm dlx bejamas add table

yarn dlx bejamas add table

Usage

1
---
2
import {
3
  Table,
4
  TableBody,
5
  TableCaption,
6
  TableCell,
7
  TableFooter,
8
  TableHead,
9
  TableHeader,
10
  TableRow,
11
} from '@bejamas/ui/components/table';
12

13
const invoices = [
14
  { invoice: "INV001", paymentStatus: "Paid", totalAmount: "$250.00", paymentMethod: "Credit Card" },
15
  { invoice: "INV002", paymentStatus: "Pending", totalAmount: "$150.00", paymentMethod: "PayPal" },
16
  { invoice: "INV003", paymentStatus: "Unpaid", totalAmount: "$350.00", paymentMethod: "Bank Transfer" },
17
  { invoice: "INV004", paymentStatus: "Paid", totalAmount: "$450.00", paymentMethod: "Credit Card" },
18
  { invoice: "INV005", paymentStatus: "Paid", totalAmount: "$550.00", paymentMethod: "PayPal" },
19
  { invoice: "INV006", paymentStatus: "Pending", totalAmount: "$200.00", paymentMethod: "Bank Transfer" },
20
  { invoice: "INV007", paymentStatus: "Unpaid", totalAmount: "$300.00", paymentMethod: "Credit Card" },
21
];
22
---
23

24
<Table>
25
  <TableCaption>A list of your recent invoices.</TableCaption>
26
  <TableHeader>
27
    <TableRow>
28
      <TableHead class="w-[100px]">Invoice</TableHead>
29
      <TableHead>Status</TableHead>
30
      <TableHead>Method</TableHead>
31
      <TableHead class="text-right">Amount</TableHead>
32
    </TableRow>
33
  </TableHeader>
34
  <TableBody>
35
    {invoices.map((invoice) => (
36
      <TableRow>
37
        <TableCell class="font-medium">{invoice.invoice}</TableCell>
38
        <TableCell>{invoice.paymentStatus}</TableCell>
39
        <TableCell>{invoice.paymentMethod}</TableCell>
40
        <TableCell class="text-right">{invoice.totalAmount}</TableCell>
41
      </TableRow>
42
    ))}
43
  </TableBody>
44
  <TableFooter>
45
    <TableRow>
46
      <TableCell colspan={3}>Total</TableCell>
47
      <TableCell class="text-right">$2,500.00</TableCell>
48
    </TableRow>
49
  </TableFooter>
50
</Table>

Examples

Use the <TableFooter /> component to add a footer to the table.

A list of your recent invoices.
Invoice	Status	Method	Amount
INV001	Paid	Credit Card	$250.00
INV002	Pending	PayPal	$150.00
INV003	Unpaid	Bank Transfer	$350.00
Total			$2,500.00

1
---
2
import { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from '@bejamas/ui/components/table';
3
---
4

5
<Table>
6
  <TableCaption>A list of your recent invoices.</TableCaption>
7
  <TableHeader>
8
    <TableRow>
9
      <TableHead class="w-[100px]">Invoice</TableHead>
10
      <TableHead>Status</TableHead>
11
      <TableHead>Method</TableHead>
12
      <TableHead class="text-right">Amount</TableHead>
13
    </TableRow>
14
  </TableHeader>
15
  <TableBody>
16
    <TableRow>
17
      <TableCell class="font-medium">INV001</TableCell>
18
      <TableCell>Paid</TableCell>
19
      <TableCell>Credit Card</TableCell>
20
      <TableCell class="text-right">$250.00</TableCell>
21
    </TableRow>
22
    <TableRow>
23
      <TableCell class="font-medium">INV002</TableCell>
24
      <TableCell>Pending</TableCell>
25
      <TableCell>PayPal</TableCell>
26
      <TableCell class="text-right">$150.00</TableCell>
27
    </TableRow>
28
    <TableRow>
29
      <TableCell class="font-medium">INV003</TableCell>
30
      <TableCell>Unpaid</TableCell>
31
      <TableCell>Bank Transfer</TableCell>
32
      <TableCell class="text-right">$350.00</TableCell>
33
    </TableRow>
34
  </TableBody>
35
  <TableFooter>
36
    <TableRow>
37
      <TableCell colspan={3}>Total</TableCell>
38
      <TableCell class="text-right">$2,500.00</TableCell>
39
    </TableRow>
40
  </TableFooter>
41
</Table>

Actions

A table showing actions for each row using a <DropdownMenu /> component.

Product	Price	Actions
Wireless Mouse	$29.99
Mechanical Keyboard	$129.99
USB-C Hub	$49.99

1
---
2
import { EllipsisIcon } from '@lucide/astro';
3

4
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '@bejamas/ui/components/dropdown-menu';
5
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@bejamas/ui/components/table';
6
---
7

8
<Table>
9
  <TableHeader>
10
    <TableRow>
11
      <TableHead>Product</TableHead>
12
      <TableHead>Price</TableHead>
13
      <TableHead class="text-right">Actions</TableHead>
14
    </TableRow>
15
  </TableHeader>
16
  <TableBody>
17
    <TableRow>
18
      <TableCell class="font-medium">Wireless Mouse</TableCell>
19
      <TableCell>$29.99</TableCell>
20
      <TableCell class="text-right">
21
        <DropdownMenu>
22
          <DropdownMenuTrigger variant="ghost" size="icon" class="size-8"><EllipsisIcon /><span class="sr-only">Open menu</span></DropdownMenuTrigger>
23
          <DropdownMenuContent align="end">
24
            <DropdownMenuItem>Edit</DropdownMenuItem>
25
            <DropdownMenuItem>Duplicate</DropdownMenuItem>
26
            <DropdownMenuSeparator />
27
            <DropdownMenuItem class="text-destructive">Delete</DropdownMenuItem>
28
          </DropdownMenuContent>
29
        </DropdownMenu>
30
      </TableCell>
31
    </TableRow>
32
    <TableRow>
33
      <TableCell class="font-medium">Mechanical Keyboard</TableCell>
34
      <TableCell>$129.99</TableCell>
35
      <TableCell class="text-right">
36
        <DropdownMenu>
37
          <DropdownMenuTrigger variant="ghost" size="icon" class="size-8"><EllipsisIcon /><span class="sr-only">Open menu</span></DropdownMenuTrigger>
38
          <DropdownMenuContent align="end">
39
            <DropdownMenuItem>Edit</DropdownMenuItem>
40
            <DropdownMenuItem>Duplicate</DropdownMenuItem>
41
            <DropdownMenuSeparator />
42
            <DropdownMenuItem class="text-destructive">Delete</DropdownMenuItem>
43
          </DropdownMenuContent>
44
        </DropdownMenu>
45
      </TableCell>
46
    </TableRow>
47
    <TableRow>
48
      <TableCell class="font-medium">USB-C Hub</TableCell>
49
      <TableCell>$49.99</TableCell>
50
      <TableCell class="text-right">
51
        <DropdownMenu>
52
          <DropdownMenuTrigger variant="ghost" size="icon" class="size-8"><EllipsisIcon /><span class="sr-only">Open menu</span></DropdownMenuTrigger>
53
          <DropdownMenuContent align="end">
54
            <DropdownMenuItem>Edit</DropdownMenuItem>
55
            <DropdownMenuItem>Duplicate</DropdownMenuItem>
56
            <DropdownMenuSeparator />
57
            <DropdownMenuItem class="text-destructive">Delete</DropdownMenuItem>
58
          </DropdownMenuContent>
59
        </DropdownMenu>
60
      </TableCell>
61
    </TableRow>
62
  </TableBody>
63
</Table>