Shadcn Table: Responsive Data Tables for React with Tailwind CSS
The shadcn table renders tabular data with semantic HTML, thin borders, and typography that stays legible at admin-dashboard density. It is plain accessible markup, real table, thead, and tbody elements styled with Tailwind CSS, which makes it the foundation for order lists, user directories, and every responsive table react developers ship inside a Next.js admin.
This page collects 12 table examples ready to copy and paste: a default table, tables inside cards, striped rows, selected rows and cells, borderless layouts, action columns, sticky headers, sticky columns, both combined, and scroll-area wrapped variants. Each example is written in TypeScript and adapts to any data shape.
When to build with the Shadcn Table
Reach for the table when users need to compare records across consistent attributes: invoices with dates and amounts, users with roles and status, or inventory with stock levels. Rows and columns beat cards precisely when scanning down one attribute matters more than viewing one record in isolation.
This component is the presentation layer only. When you need sorting, filtering, column visibility, and row selection managed for you, step up to the data table, which combines these same styled parts with TanStack Table logic.
Design guidelines
- Right-align numbers: Amounts and quantities align on the decimal when right-aligned, making column comparison effortless.
- Pin what anchors scanning: Use the sticky header for long tables and a sticky first column when horizontal scrolling would hide row identity.
- Use zebra stripes at density: The striped variant helps eyes track across wide rows, but skip it for short five-row tables.
- Keep actions at the row edge: A trailing action column with an icon button keeps rows clean while keeping operations reachable.
- Let tables scroll, not break: Wrap wide tables in a horizontal scroll container instead of squeezing columns until content wraps badly.
Why this table works well
- Semantic and accessible: Real table elements with a caption slot give screen readers row and column context for free.
- No runtime dependency: There is no table library underneath, just styled markup, so the bundle cost is effectively zero.
- Composable parts: Header, body, footer, row, cell, and caption are separate components you can rearrange or extend.
- Density on your terms: Padding and text sizes are plain Tailwind classes in your own file, so compact and comfortable modes are one edit away.
Pairing with other components
Tables gain interactivity through composition: a checkbox column enables the selected rows variant, a badge communicates status per row, and a dropdown menu in the action column holds edit and delete. Below the table, pagination keeps large datasets navigable.
The with card variant nests the table inside a card with a title and toolbar, and the scroll variant uses a scroll area for controlled overflow. Complete order and user tables assembled this way are available in our dashboard blocks.
No primitive underneath
There is no Radix or Base UI primitive behind this component, and none is needed: it is plain accessible HTML styled with Tailwind CSS. That neutrality means the table drops into projects built on either Radix UI or Base UI without any dependency friction, and interactive cells can host components from either ecosystem. The part anatomy is documented in the shadcn table docs.