# Table Expandable Rows — React Table Component

> Table rows that open a detail panel underneath with a spring height animation and a rotating chevron, one at a time or many.

- Category: [Tables & Lists](https://pixelpapa.com/components/tables.md)
- Tags: table, expand, accordion, detail, height
- Dependencies: lucide-react, motion (plus React and Tailwind CSS v4)
- Last updated: 2026-11-13
- Live preview: https://pixelpapa.com/components/tables/table-expandable-rows

## Install (PixelPapa Pro)

This is a Pro component. With a Pro or Scale plan and the `@pixelpapa` registry set up (https://pixelpapa.com/docs/installation#pro):

```bash
npx shadcn@latest add @pixelpapa/table-expandable-rows
```

The file is written to `components/pixelpapa/table-expandable-rows.tsx`. Source code is available to Pro members on https://pixelpapa.com/components/tables/table-expandable-rows.

## AI prompt

```text
Add the "Table Expandable Rows" component from PixelPapa UI to this project.

What it is: Table rows that open a detail panel underneath with a spring height animation and a rotating chevron, one at a time or many.
Category: Tables & Lists. Depends on: lucide-react, motion.

1. Install it with the shadcn CLI. It is a PixelPapa Pro component, so components.json needs the "@pixelpapa" registry with my API key (https://pixelpapa.com/docs/installation#pro):
   npx shadcn@latest add @pixelpapa/table-expandable-rows
   (If the CLI is unavailable, fetch https://pixelpapa.com/r/table-expandable-rows.json with the header "Authorization: Bearer $PIXELPAPA_API_KEY", write files[0].content to components/pixelpapa/table-expandable-rows.tsx and install the listed dependencies.)
2. Import it from "@/components/pixelpapa/table-expandable-rows" and place it where I describe below.
3. Keep its animation timings and accessibility attributes. Replace the demo copy and data with content that fits my product, and use my existing theme tokens (bg-background, text-foreground, bg-primary, border-border) rather than hard-coded colours.

Where to use it: <describe the page and position here>
```

## More tables & lists

- [List Drag Reorder](https://pixelpapa.com/components/tables/list-drag-reorder.md): A ranked list you reorder by dragging a grip handle (or Arrow keys); the lifted row floats with a shadow while the others spring out of its way.
- [Table Inline Status Edit](https://pixelpapa.com/components/tables/table-inline-status-edit.md): Each row carries a status pill that opens a keyboard-friendly dropdown in place; the pill swaps with a spring and the row confirms the save.
- [Table Row Select Bulk](https://pixelpapa.com/components/tables/table-row-select-bulk.md) (Pro): Checkbox rows with shift-click range selection and a floating action bar that springs up from the bottom with a rolling count.
- [Table Sortable Animated](https://pixelpapa.com/components/tables/table-sortable-animated.md): A semantic data table whose rows glide to their new positions with spring layout animation when a column header is clicked.