Shadcn Table Components

Shadcn Table Component

The Shadcn Table displays data in rows and columns so users can scan, compare and act on it. Payments, orders, invoices, users and reports all end up in a table sooner or later, and a clean, readable table is often the most used screen in a dashboard or admin panel.

Striped rows, sticky headers and first columns, row selection with checkboxes, an actions menu per row and a table inside a Scroll Area are all part of this shadcn table collection. Because the table is built from native HTML table elements with shadcn/ui, React and Tailwind CSS, with no primitive dependency, it combines easily with Radix UI and Base UI components.

What is the Shadcn Table Component?

The shadcn/ui table is a set of thin wrappers around table, thead, tbody, tfoot, tr, th, td and caption. Each part adds sensible defaults: row borders, a hover background, compact padding and a selected row style. The root is wrapped in a container with horizontal scrolling, so wide tables stay usable on small screens without breaking the page layout.

Use the table for static or lightly interactive data that you render yourself. When you need sorting, filtering, column visibility and pagination, build on the Data Table, which combines this component with TanStack Table. For content that is not really tabular, such as a list of people or settings, an Item list or a Card grid reads better on mobile.

Anatomy of the Shadcn Table

12 Shadcn Table Variants

Each table variant listed here is previewed live at the top of this page, together with its source code and install command.

• Basic and with card: A payments table with customer avatars, prices and colored status badges, on its own or inside a card with a title.
• Striped and without borders: Alternating row backgrounds for easier scanning, and a borderless layout with a rounded, muted header row.
• Selected rows and cells: Highlights whole rows or individual cells with a data attribute, useful for search matches or validation results.
• Selectable rows: A checkbox in every row and a select all checkbox in the header that shows the indeterminate state when only some rows are selected.
• Action column: A last column with a dropdown menu for View details, Edit, Refund or Retry payment, and a destructive Delete action.
• Sticky header and column: A header row that stays at the top while scrolling, a first column that stays on the left, or both together.
• With Scroll Area: A fixed height table wrapped in a Scroll Area for a custom, theme matching scrollbar.

How to Install the Shadcn Table Component

Set up shadcn/ui in your project if you have not already, then add the Shadcn UI Kit registry to your components.json once:

{
  "registries": {
    "@shadcnuikit": "https://shadcnuikit.com/r/{name}.json"
  }
}

Then install a table variant by its name:

npx shadcn@latest add @shadcnuikit/table1

The same command works with pnpm dlx, yarn dlx and bunx --bun. Each variant has a copy button for every package manager, and the code is added to your project as plain React and Tailwind CSS that you can edit freely.

How to Use the Shadcn Table Component

Import the parts from your components/ui folder and map your data to TableRow elements. Use TableFooter for totals and TableCaption to describe the table.

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

const invoices = [
  { id: "INV-001", status: "Paid", method: "Credit Card", amount: 250 },
  { id: "INV-002", status: "Pending", method: "PayPal", amount: 150 },
  { id: "INV-003", status: "Unpaid", method: "Bank Transfer", amount: 350 },
]

export function InvoiceTable() {
  const total = invoices.reduce((sum, invoice) => sum + invoice.amount, 0)

  return (
    <Table>
      <TableCaption>A list of your recent invoices.</TableCaption>
      <TableHeader>
        <TableRow>
          <TableHead>Invoice</TableHead>
          <TableHead>Status</TableHead>
          <TableHead>Method</TableHead>
          <TableHead className="text-right">Amount</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {invoices.map((invoice) => (
          <TableRow key={invoice.id}>
            <TableCell className="font-medium">{invoice.id}</TableCell>
            <TableCell>{invoice.status}</TableCell>
            <TableCell>{invoice.method}</TableCell>
            <TableCell className="text-right">${invoice.amount}.00</TableCell>
          </TableRow>
        ))}
      </TableBody>
      <TableFooter>
        <TableRow>
          <TableCell colSpan={3}>Total</TableCell>
          <TableCell className="text-right">${total}.00</TableCell>
        </TableRow>
      </TableFooter>
    </Table>
  )
}

Why Use the Shadcn Table Component

• Semantic HTML: Real table elements give screen readers row and column context and keep the data copyable.
• Responsive by default: The built in scroll container keeps wide tables usable on phones without breaking the layout.
• Easy to style: Striping, borders, sticky headers and selected states are regular Tailwind CSS classes on each part.
• Composable: Cells can hold avatars, badges, checkboxes, buttons and dropdown menus from the same component set.
• Ready for Data Table: The same parts power the Data Table, so you can add sorting and pagination later without restyling.

Common Table Use Cases

• Payments and orders: Transaction lists with customers, amounts, methods and status badges.
• User management: Lists of team members with roles, status and a row action menu.
• Invoices and reports: Line items with a footer that shows totals.
• Pricing comparisons: Plan features compared side by side in columns.
• Logs and activity: Long, scrollable lists with a sticky header so the columns stay labelled.
• Bulk editing: Selectable rows that feed bulk actions like export, archive or delete.

Customizing the Shadcn Table

Every part accepts a className. Add stripes with [&_tr:nth-child(even)]:bg-muted on TableBody and remove borders with border-b-0. For a sticky header, limit the height of the scroll container that Table renders around the table element, then add sticky top-0 and a background to the header row, as the sticky header variant does. An extra outer wrapper with its own overflow will not work, because the inner container is the element that scrolls. Colors come from theme tokens such as muted and border, and the free Theme Generator can create a matching palette.

For example, a scrollable table with a sticky header:

<div className="rounded-lg border [&>div]:max-h-80">
  <Table>
    <TableHeader>
      <TableRow className="bg-muted sticky top-0 z-10">
        ...
      </TableRow>
    </TableHeader>
    <TableBody className="[&_tr:nth-child(even)]:bg-muted/50">
      ...
    </TableBody>
  </Table>
</div>

Table Accessibility

Because the component renders native table elements, screen readers announce the number of rows and columns and read the column header with each cell. Always use TableHead for header cells, and add a TableCaption or an aria-label on the table so users know what the data is about.

The table itself has no keyboard interaction; focus moves only through interactive content inside cells, such as checkboxes, links and menu buttons. Give each of them a label that includes the row, for example aria-label="Select PAY-004", as the selectable rows variant does, and label icon only action buttons.

Table Best Practices

• Align numbers and prices to the right so they are easy to compare.
• Keep the most important column, usually a name or ID, on the left and make it sticky on wide tables.
• Use badges for status values instead of plain text, so they can be scanned quickly.
• Hide rarely used actions behind a row action menu instead of a row of buttons.
• Show an empty state row when there is no data instead of an empty table.
• Switch to the Data Table once users need to sort, filter or paginate.

Components Related to Table

Shadcn Table FAQ

Looking for something else? Browse all shadcn/ui components or ready-made UI blocks built with them.