Table

Display invoices, products, and other structured data in familiar rows and columns.

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

A list of your recent invoices.

tsx

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

Installation

npx @arctis-sh/@arctis-sh/ui@latest add table

Usage

1import {2  Table,3  TableBody,4  TableCaption,5  TableCell,6  TableHead,7  TableHeader,8  TableRow,9} from "@/components/ui/table"

1<div>2  <Table>3    <TableHeader>4      <TableRow>5        <TableHead className="w-[100px]">Invoice</TableHead>6        <TableHead>Status</TableHead>7        <TableHead>Method</TableHead>8        <TableHead className="text-right">Amount</TableHead>9      </TableRow>10    </TableHeader>11    <TableBody>12      <TableRow>13        <TableCell className="font-medium">INV001</TableCell>14        <TableCell>Paid</TableCell>15        <TableCell>Credit Card</TableCell>16        <TableCell className="text-right">$250.00</TableCell>17      </TableRow>18    </TableBody>19  </Table>20  <TableCaption>Recent invoices.</TableCaption>21</div>

Composition

div
├── Table
│   ├── TableHeader
│   │   └── TableRow
│   │       ├── TableHead
│   │       ├── TableHead
│   │       ├── TableHead
│   │       └── TableHead
│   ├── TableBody
│   │   ├── TableRow
│   │   │   ├── TableCell
│   │   │   ├── TableCell
│   │   │   ├── TableCell
│   │   │   └── TableCell
│   │   └── TableRow
│   │       ├── TableCell
│   │       ├── TableCell
│   │       ├── TableCell
│   │       └── TableCell
│   └── TableFooter
└── TableCaption

Footer

Add TableFooter for totals or other summary content below the body.

Invoice	Status	Method	Amount
INV001	Paid	Credit Card	$250.00
INV002	Pending	PayPal	$150.00
INV003	Unpaid	Bank Transfer	$350.00
Total			$750.00

A list of your recent invoices.

tsx

1import {2  Table,3  TableBody,4  TableCaption,5  TableCell,6  TableFooter,7  TableHead,8  TableHeader,9  TableRow,10} from "@/components/ui/table"1112const invoices = [13  { invoice: "INV001", status: "Paid", method: "Credit Card", amount: "$250.00" },14  { invoice: "INV002", status: "Pending", method: "PayPal", amount: "$150.00" },15  { invoice: "INV003", status: "Unpaid", method: "Bank Transfer", amount: "$350.00" },16]1718export function Example() {19  return (20    <div>21      <Table>22        <TableHeader>23          <TableRow>24            <TableHead className="w-[100px]">Invoice</TableHead>25            <TableHead>Status</TableHead>26            <TableHead>Method</TableHead>27            <TableHead className="text-right">Amount</TableHead>28          </TableRow>29        </TableHeader>30        <TableBody>31          {invoices.map((row) => (32            <TableRow key={row.invoice}>33              <TableCell className="font-medium">{row.invoice}</TableCell>34              <TableCell>{row.status}</TableCell>35              <TableCell>{row.method}</TableCell>36              <TableCell className="text-right">{row.amount}</TableCell>37            </TableRow>38          ))}39        </TableBody>40        <TableFooter>41          <TableRow>42            <TableCell colSpan={3}>Total</TableCell>43            <TableCell className="text-right">$750.00</TableCell>44          </TableRow>45        </TableFooter>46      </Table>47      <TableCaption>A list of your recent invoices.</TableCaption>48    </div>49  )50}

Actions

Place a DropdownMenu in a cell for actions that belong to a single row.

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

tsx

1import {2  DropdownMenu,3  DropdownMenuContent,4  DropdownMenuItem,5  DropdownMenuTrigger,6} from "@/components/ui/dropdown-menu"7import {8  Table,9  TableBody,10  TableCell,11  TableHead,12  TableHeader,13  TableRow,14} from "@/components/ui/table"1516const products = [17  { name: "Wireless Mouse", price: "$29.99" },18  { name: "Mechanical Keyboard", price: "$129.99" },19  { name: "USB-C Hub", price: "$49.99" },20]2122export function Example() {23  return (24    <Table>25      <TableHeader>26        <TableRow>27          <TableHead>Product</TableHead>28          <TableHead>Price</TableHead>29          <TableHead className="w-[70px] text-right">30            <span className="sr-only">Actions</span>31          </TableHead>32        </TableRow>33      </TableHeader>34      <TableBody>35        {products.map((product) => (36          <TableRow key={product.name}>37            <TableCell className="font-medium">{product.name}</TableCell>38            <TableCell>{product.price}</TableCell>39            <TableCell className="text-right">40              <DropdownMenu>41                <DropdownMenuTrigger42                  aria-label="Open menu"43                  className="inline-flex size-6 shrink-0 items-center justify-center rounded-sm text-foreground/50 transition-colors duration-200 ease-out hover:bg-surface-hover hover:text-foreground aria-expanded:bg-surface-hover aria-expanded:text-foreground"44                >45                  <MoreHorizontalIcon className="size-3.5" />46                </DropdownMenuTrigger>47                <DropdownMenuContent align="end">48                  <DropdownMenuItem>Edit</DropdownMenuItem>49                  <DropdownMenuItem>Duplicate</DropdownMenuItem>50                  <DropdownMenuItem>Delete</DropdownMenuItem>51                </DropdownMenuContent>52              </DropdownMenu>53            </TableCell>54          </TableRow>55        ))}56      </TableBody>57    </Table>58  )59}

Data Table

Need sorting, filtering, pagination, or row selection? See Data Table.

API Reference

Prop	Type	Default
className	string	—

Also accepts the other native table attributes.

1<Table>2  <TableHeader>3    <TableRow>4      <TableHead>Name</TableHead>5    </TableRow>6  </TableHeader>7  <TableBody>8    <TableRow>9      <TableCell>Mina</TableCell>10    </TableRow>11  </TableBody>12</Table>

TableHeader

Prop	Type	Default
className	string	—

Also accepts the other native thead attributes.

1<TableHeader>2  <TableRow>3    <TableHead>Name</TableHead>4  </TableRow>5</TableHeader>

TableBody

Prop	Type	Default
className	string	—

Also accepts the other native tbody attributes.

1<TableBody>2  <TableRow>3    <TableCell>Mina</TableCell>4  </TableRow>5</TableBody>

TableFooter

Prop	Type	Default
className	string	—

Also accepts the other native tfoot attributes.

1<TableFooter>2  <TableRow>3    <TableCell>Total</TableCell>4  </TableRow>5</TableFooter>

TableRow

Prop	Type	Default
className	string	—

Also accepts the other native tr attributes. Set data-state="selected" for a selected row.

1<TableRow>2  <TableCell>Mina</TableCell>3</TableRow>

TableHead

Prop	Type	Default
className	string	—

Also accepts the other native th attributes.

1<TableHead>Name</TableHead>

TableCell

Prop	Type	Default
className	string	—

Also accepts the other native td attributes.

1<TableCell>Mina</TableCell>

TableCaption

Place TableCaption next to Table, not inside it.

Prop	Type	Default
className	string	—

Also accepts the other native div attributes.

1<TableCaption>A list of people.</TableCaption>