Q: What is a shadcn table?

A shadcn Table is the styled ` ` you reach for when you want clean, accessible tabular data without the heaviness of a full Data Table — invoices, orders, transactions, simple comparisons, static reports. shadcn ships Table / TableHeader / TableBody / TableRow / TableHead / TableCell / TableCaption / TableFooter as composable wrappers around native ` ` semantics.

Q: How do I add a footer with totals to a table?

Use the standard variant with TableFooter. Render ` ` after ` ` with a single ` ` containing the totals ("Total: $1,234.56"). The footer cell typically spans columns via `colSpan={n-1}` so the total aligns with the value column. Useful for invoices, expense reports, anything with summable data.

Q: How do I add a caption to the table?

Use TableCaption as the first child of Table — ` Recent invoices `. Renders centered above the table by default. Captions are read by screen readers BEFORE the table content, giving SR users context for what they're about to navigate. Always include for tables in standalone contexts (no surrounding heading already explaining the data).

Question 1

What is a shadcn table?

Accepted Answer

A shadcn Table is the styled `` you reach for when you want clean, accessible tabular data without the heaviness of a full Data Table — invoices, orders, transactions, simple comparisons, static reports. shadcn ships Table / TableHeader / TableBody / TableRow / TableHead / TableCell / TableCaption / TableFooter as composable wrappers around native `

` semantics.

Question 2

Are these table examples free?

Accepted Answer

Yes, every table example on shadcn.io is free for personal and commercial use — no attribution requirement, no runtime dependency, no gating.

Question 3

Table vs Data Table — which one?

Accepted Answer

Table for STATIC data — simple lists where users only read (invoice line items, order summaries, static reports). Data Table for INTERACTIVE data — sortable columns, filters, pagination, row selection (TanStack Table powered). If your table needs ANY interactivity beyond "display the rows", switch to Data Table. Use Table when display is the entire job.

Question 4

Why use Table primitives instead of plain <table>?

Accepted Answer

Plain `<table>` is functional but visually unstyled and inconsistent across themes. shadcn's Table primitives ship vetted padding, border, hover state, and dark-mode tokens so the table looks like the rest of your app without per-project CSS work. Native semantics are preserved (screen readers still announce row/column headers correctly), so you get accessibility for free.

Question 5

How do I add a footer with totals to a table?

Accepted Answer

Use the standard variant with TableFooter. Render `` after `` with a single `` containing the totals ("Total: $1,234.56"). The footer cell typically spans columns via `colSpan={n-1}` so the total aligns with the value column. Useful for invoices, expense reports, anything with summable data.

Question 6

How do I make tables responsive on mobile?

Accepted Answer

Three patterns. (1) Horizontal scroll (`

`) — keeps the columnar layout but lets users scroll on narrow screens. Easiest, works for any table. (2) Column-hide — wrap `hidden md:table-cell` on lower-priority columns so mobile shows only essential ones. Better visual on mobile but loses data. (3) Card-on-mobile, table-on-desktop — render the same data as a Card list at mobile widths. Most accessible but doubles the rendering code.

Question 7

How do I add a caption to the table?

Accepted Answer

Use TableCaption as the first child of Table — `Recent invoices`. Renders centered above the table by default. Captions are read by screen readers BEFORE the table content, giving SR users context for what they're about to navigate. Always include for tables in standalone contexts (no surrounding heading already explaining the data).

Question 8

How do I install a table example?

Accepted Answer

Run the `npx shadcn@latest add` command shown under the Installation heading. The CLI copies the example's TSX source into `components/examples/table/…`, plus the shadcn/ui Table primitives if you don't already have them.

Question 9

How do I make alternating row colors?

Accepted Answer

Add `data-[parity=odd]:bg-muted/30` to TableRow and walk the rows in your render loop setting `data-parity={i % 2 ? 'odd' : 'even'}`. Or use Tailwind's `even:bg-muted/30` directly on TableRow — simpler if you don't need parity-state targeting elsewhere. Useful for dense data tables where row banding helps users track across columns.

Question 10

How do I keep the table header visible while scrolling (sticky header)?

Accepted Answer

Wrap Table in a scrollable container with a fixed height (`

`). Add `sticky top-0 z-10 bg-background` to TableHead. The header row stays pinned as users scroll the body. Common pattern for in-card tables where the surrounding chrome (Card header, footer) shouldn't scroll out of view.

Question 11

Which libraries do table examples depend on?

Accepted Answer

shadcn/ui Table primitives (Table, TableHeader, TableBody, TableRow, TableHead, TableCell, TableCaption, TableFooter — generated into your project by the CLI), Tailwind CSS. React 19 baseline. No state library — Table is pure render. For sortable / filterable / paginated tables, see the Data Table examples gallery instead.

Question 12

Are table examples accessible for keyboard and screen reader users?

Accepted Answer

Yes. The native `` semantics give screen readers proper navigation: row 1 of 5, column "Email". TableCaption announces the table's purpose. TableHeader cells use `

` so SR users hear column headers when navigating cells. For row headers (e.g., the first cell identifies the row), use `

` on that cell. Tab navigates clickable cells in DOM order.

Question 13

Can I use these table examples with React Server Components?

Accepted Answer

Yes — Table is pure render with no client state. Renders cleanly as a Server Component. For server-rendered tables with data fetched via async Server Components, the table renders inside the resolved Server Component tree with zero JavaScript needed. Switch to Data Table only when you need client-side sort / filter / pagination interactivity.

React Table Examples for shadcn/ui

Browse every table example

Frequently Asked Questions