Table

A responsive table component with composable sub-components.

Invoice	Amount
INV001	$250.00
INV002	$150.00

caption

footer

#Installation

bunx --bun barefoot add table

#Usage

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

1import {2  Table, TableHeader, TableBody, TableFooter,3  TableRow, TableHead, TableCell, TableCaption,4} from "@/components/ui/table"56function TableDemo() {7  return (8    <Table>9      <TableCaption>A list of recent invoices.</TableCaption>10      <TableHeader>11        <TableRow>12          <TableHead className="w-[100px]">Invoice</TableHead>13          <TableHead>Status</TableHead>14          <TableHead>Method</TableHead>15          <TableHead className="text-right">Amount</TableHead>16        </TableRow>17      </TableHeader>18      <TableBody>19        <TableRow>20          <TableCell className="font-medium">INV001</TableCell>21          <TableCell>Paid</TableCell>22          <TableCell>Credit Card</TableCell>23          <TableCell className="text-right">$250.00</TableCell>24        </TableRow>25        <TableRow>26          <TableCell className="font-medium">INV002</TableCell>27          <TableCell>Pending</TableCell>28          <TableCell>PayPal</TableCell>29          <TableCell className="text-right">$150.00</TableCell>30        </TableRow>31        <TableRow>32          <TableCell className="font-medium">INV003</TableCell>33          <TableCell>Paid</TableCell>34          <TableCell>Bank Transfer</TableCell>35          <TableCell className="text-right">$350.00</TableCell>36        </TableRow>37      </TableBody>38      <TableFooter>39        <TableRow>40          <TableCell colSpan={3}>Total</TableCell>41          <TableCell className="text-right">$750.00</TableCell>42        </TableRow>43      </TableFooter>44    </Table>45  )46}

#Examples

#Basic

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

1import {2  Table, TableBody, TableCell, TableHead, TableHeader, TableRow,3} from '@/components/ui/table'45const invoices = [6  { invoice: 'INV001', status: 'Paid', method: 'Credit Card', amount: '$250.00' },7  { invoice: 'INV002', status: 'Pending', method: 'PayPal', amount: '$150.00' },8  { invoice: 'INV003', status: 'Unpaid', method: 'Bank Transfer', amount: '$350.00' },9  { invoice: 'INV004', status: 'Paid', method: 'Credit Card', amount: '$450.00' },10]1112function TableBasic() {13  return (14    <Table>15      <TableHeader>16        <TableRow>17          <TableHead className="w-[100px]">Invoice</TableHead>18          <TableHead>Status</TableHead>19          <TableHead>Method</TableHead>20          <TableHead className="text-right">Amount</TableHead>21        </TableRow>22      </TableHeader>23      <TableBody>24        {invoices.map((inv) => (25          <TableRow>26            <TableCell className="font-medium">{inv.invoice}</TableCell>27            <TableCell>{inv.status}</TableCell>28            <TableCell>{inv.method}</TableCell>29            <TableCell className="text-right">{inv.amount}</TableCell>30          </TableRow>31        ))}32      </TableBody>33    </Table>34  )35}

#With Footer

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

1import {2  Table, TableBody, TableCaption, TableCell,3  TableFooter, TableHead, TableHeader, TableRow,4} from '@/components/ui/table'56const invoices = [7  { invoice: 'INV001', status: 'Paid', method: 'Credit Card', amount: '$250.00' },8  { invoice: 'INV002', status: 'Pending', method: 'PayPal', amount: '$150.00' },9  { invoice: 'INV003', status: 'Unpaid', method: 'Bank Transfer', amount: '$350.00' },10  { invoice: 'INV004', status: 'Paid', method: 'Credit Card', amount: '$450.00' },11  { invoice: 'INV005', status: 'Paid', method: 'PayPal', amount: '$550.00' },12  { invoice: 'INV006', status: 'Pending', method: 'Bank Transfer', amount: '$200.00' },13  { invoice: 'INV007', status: 'Unpaid', method: 'Credit Card', amount: '$300.00' },14]1516function TableWithFooter() {17  return (18    <Table>19      <TableCaption>A list of your recent invoices.</TableCaption>20      <TableHeader>21        <TableRow>22          <TableHead className="w-[100px]">Invoice</TableHead>23          <TableHead>Status</TableHead>24          <TableHead>Method</TableHead>25          <TableHead className="text-right">Amount</TableHead>26        </TableRow>27      </TableHeader>28      <TableBody>29        {invoices.map((inv) => (30          <TableRow>31            <TableCell className="font-medium">{inv.invoice}</TableCell>32            <TableCell>{inv.status}</TableCell>33            <TableCell>{inv.method}</TableCell>34            <TableCell className="text-right">{inv.amount}</TableCell>35          </TableRow>36        ))}37      </TableBody>38      <TableFooter>39        <TableRow>40          <TableCell colSpan={3}>Total</TableCell>41          <TableCell className="text-right">$2,500.00</TableCell>42        </TableRow>43      </TableFooter>44    </Table>45  )46}

#API Reference

Table

Prop	Type	Default	Description
children	Child	-	Table sub-components (TableHeader, TableBody, TableFooter, TableCaption).
className	string	-	Additional CSS classes for the table element.

TableRow

Prop	Type	Default	Description
children	Child	-	TableHead or TableCell elements.
data-state	'selected'	-	Set to "selected" to highlight the row.

TableCell / TableHead

Prop	Type	Default	Description
children	Child	-	Cell content.
colSpan	number	-	Number of columns the cell should span.