How do I add a footer or a caption to the Table?

Use TableFooter after TableBody for totals, as the Footer demo does, and TableCaption for a short description of the data. A caption is also what screen readers announce as the table's name.

shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Components

Free

Table for Ark UI

Q: How do I make a striped Table with Ark UI?

Set variant="striped" on the Table to shade every other row. Rows highlight on hover by default; set isHoverable to false to turn that off.

Q: How do I add an actions menu to each Table row?

Put a button in the last TableCell of each row that opens a Dropdown Menu, as the Actions demo does. Give the button an aria-label that names the row, like "Actions for Ada".

Compare rows such as invoices or payments, with the values lined up in columns. For React with Ark UI, sorting is not included, and wide tables scroll sideways.

Rows and columns for data people compare, like invoices or payments. The header looks clickable, but sorting is not built in.

Use a table when people scan values down a column. A handful of labeled fields, not a grid, is a Data List. In React, Ark UI supplies the table styles, and you render the rows yourself.

PreviewCode

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

Installation

Free with an account. It carries your token, so the CLI installs everything in one go.

Google GitHub

Use email insteadNo credit card

Anatomy

Usage

import {
  Table, TableBody, TableCaption, TableCell, TableFooter, TableHead,
  TableHeader, TableRow,
} from "@/components/ui/table";

const invoices = [
  {
    invoice: "INV001",
    paymentMethod: "Credit Card",
    paymentStatus: "Paid",
    totalAmount: "$250.00",
  },
  {
    invoice: "INV002",
    paymentMethod: "PayPal",
    paymentStatus: "Pending",
    totalAmount: "$150.00",
  },
  {
    invoice: "INV003",
    paymentMethod: "Bank Transfer",
    paymentStatus: "Unpaid",
    totalAmount: "$350.00",
  },
  {
    invoice: "INV004",
    paymentMethod: "Credit Card",
    paymentStatus: "Paid",
    totalAmount: "$450.00",
  },
  {
    invoice: "INV005",
    paymentMethod: "PayPal",
    paymentStatus: "Paid",
    totalAmount: "$550.00",
  },
  {
    invoice: "INV006",
    paymentMethod: "Bank Transfer",
    paymentStatus: "Pending",
    totalAmount: "$200.00",
  },
  {
    invoice: "INV007",
    paymentMethod: "Credit Card",
    paymentStatus: "Unpaid",
    totalAmount: "$300.00",
  },
];

const TableDemo = () => (
  <Table>
    <TableCaption>A list of your recent invoices.</TableCaption>
    <TableHeader>
      <TableRow>
        <TableHead className="w-[100px]">Invoice</TableHead>
        <TableHead>Status</TableHead>
        <TableHead>Method</TableHead>
        <TableHead className="text-right">Amount</TableHead>
      </TableRow>
    </TableHeader>
    <TableBody>
      {invoices.map((invoice) => (
        <TableRow key={invoice.invoice}>
          <TableCell className="font-medium">{invoice.invoice}</TableCell>
          <TableCell>{invoice.paymentStatus}</TableCell>
          <TableCell>{invoice.paymentMethod}</TableCell>
          <TableCell className="text-right">{invoice.totalAmount}</TableCell>
        </TableRow>
      ))}
    </TableBody>
    <TableFooter>
      <TableRow>
        <TableCell colSpan={3}>Total</TableCell>
        <TableCell className="text-right">$2,500.00</TableCell>
      </TableRow>
    </TableFooter>
  </Table>
);

Demos

TableFooter holds a summary row, a Total label spanning the first columns and the amount in the last cell. The body above it is a few invoices, so the total is not another record in disguise. Use a footer for a sum, a count, or a balance that should look different from the data, and keep real records in TableBody. A footer that repeats the column headers does not help.

PreviewCode

Actions

Each product row ends in a menu: Edit, Duplicate, and a destructive Delete. The trigger is an icon button named Open menu, so it is not an unlabeled ellipsis. Use a per-row menu when the actions belong to that one record and would not fit as buttons in the cell. Actions on many selected rows belong in an Action Bar, and this column should stay narrow.

PreviewCode

Data Table

The same cells, with TanStack Table behind them: filter the email column, sort it, hide columns, select rows, and page five at a time. The grid is still just the cells, and the table library owns the state. Use this shape for an admin list that needs those behaviors, not for three static invoices. The footer and the row menu above are the smaller patterns.

PreviewCode

Rtl

dir is rtl on the table, with an Arabic caption, headers, and statuses, and the amount stays in the last column. Use it when the table's language is right-to-left. Setting dir here does not flip the rest of the page. Set direction on the document when every region should follow, and on the table when only this grid is right-to-left.

PreviewCode

FAQ

How do I add sorting, filtering and pagination to the Table in React?

The Table only styles rows and cells, so sort, filter and page your data before you render it. For a full data table, see the Data Table demo: it pairs the Table with TanStack Table for sorting, filtering, column visibility, row selection and pagination.

How do I make the Table responsive on mobile?

The Table sits in a container that scrolls sideways when the columns do not fit, so wide tables stay readable on small screens. Keep the first column short, and hide less important columns with classes like hidden md:table-cell. To let a keyboard scroll it, give the Table tabIndex={0} and a name (aria-label or aria-labelledby): the container takes the tab stop and becomes a region with the table's name.

How do I make a striped Table with Ark UI?

Set variant="striped" on the Table to shade every other row. Rows highlight on hover by default; set isHoverable to false to turn that off.

How do I add an actions menu to each Table row?

Put a button in the last TableCell of each row that opens a Dropdown Menu, as the Actions demo does. Give the button an aria-label that names the row, like "Actions for Ada".

Can I select rows in the Table?

Yes: keep the selected rows in state and add a Checkbox to a first column, as the Data Table demo does with TanStack Table.

How do I install the Table in React?

Run the command in the Installation section above: it adds the Table and its parts to your ui folder. The command uses the shadcn CLI.

API Reference

Table

<table> data-slot="table-container"

PropType

isHoverable?boolean

Whether the table rows are hoverable.

Default: true

variant?"plain" | "striped"

The variant of the table.

Type: "plain" | "striped"
Default: "plain"

asChild?boolean

Use the provided child element as the default rendered element, combining their props and behavior.

className?string

Merged with the part's classes.

AttributeType

data-hoverable?string

"true" when isHoverable is true, otherwise "false".

data-variant?string

Mirrors variant.

TableHeader

<thead> data-slot="table-header"

PropType

asChild?boolean

Use the provided child element as the default rendered element, combining their props and behavior.

className?string

Merged with the part's classes.

TableBody

<tbody> data-slot="table-body"

PropType

asChild?boolean

Use the provided child element as the default rendered element, combining their props and behavior.

className?string

Merged with the part's classes.

TableFooter

<tfoot> data-slot="table-footer"

PropType

asChild?boolean

Use the provided child element as the default rendered element, combining their props and behavior.

className?string

Merged with the part's classes.

TableRow

<tr> data-slot="table-row"

PropType

asChild?boolean

Use the provided child element as the default rendered element, combining their props and behavior.

className?string

Merged with the part's classes.

TableHead

<th> data-slot="table-head"

PropType

asChild?boolean

Use the provided child element as the default rendered element, combining their props and behavior.

className?string

Merged with the part's classes.

TableCell

<td> data-slot="table-cell"

PropType

asChild?boolean

Use the provided child element as the default rendered element, combining their props and behavior.

className?string

Merged with the part's classes.

TableCaption

<caption> data-slot="table-caption"

PropType

asChild?boolean

Use the provided child element as the default rendered element, combining their props and behavior.

className?string

Merged with the part's classes.

With other components

Checkbox
Selection
Select rows in bulk
Badge
Feedback
Status in a cell
Dropdown Menu
Menus
Per-row action menu
Button
Buttons
Edit or delete
Pagination
Navigation
Pages under the table
Skeleton
Feedback
Rows while it loads

Empty
Feedback
No rows to show
Card
Layout
Frame around the table
Chart
Data
Same numbers, plotted
Item
Layout
One row, not columns
Data List
Data
Pairs, not a grid
Action Bar
Overlays
Actions for the selection

All 105 components 8 table examples

Installation

Anatomy

Usage

Demos

Footer

Actions

Data Table

Rtl

FAQ

How do I add sorting, filtering and pagination to the Table in React?

How do I make the Table responsive on mobile?

How do I make a striped Table with Ark UI?

How do I add an actions menu to each Table row?

Can I select rows in the Table?

How do I add a footer or a caption to the Table?

How do I install the Table in React?

API Reference

Table

TableHeader

TableBody

TableFooter

TableRow

TableHead

TableCell

TableCaption

With other components

Related