[V0_FILE]typescriptreact:file="expanding-table-row.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState } from "react" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" // Sample data for the table const data = [ { id: 1, name: "John Doe", email: "john@example.com", role: "Developer" }, { id: 2, name: "Jane Smith", email: "jane@example.com", role: "Designer" }, { id: 3, name: "Bob Johnson", email: "bob@example.com", role: "Manager" }, { id: 4, name: "Alice Brown", email: "alice@example.com", role: "Product Owner" }, { id: 5, name: "Charlie Wilson", email: "charlie@example.com", role: "QA Engineer" }, ] export default function ExpandingTableRow() { return (

Expanding Table Rows on Hover

ID Name Email Role {data.map((row) => ( {row.id} {row.name} {row.email} {row.role} ))}

Alternative Implementation with More Content

This version shows additional content when hovering:

) } function ExpandingTableWithContent() { return (

ID Name Email Role {data.map((row) => ( ))}

) } function ExpandingRow({ data }) { const [isHovered, setIsHovered] = useState(false) return ( setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} > {data.id}

{data.name}

Additional details about {data.name}.
Click to view full profile.

{data.email}

Last contacted: 3 days ago

{data.role}

Department: {data.id % 2 === 0 ? "Engineering" : "Product"}

) } [V0_FILE]typescriptreact:file="app/globals.css" isEdit="true" isQuickEdit="true" @tailwind base; @tailwind components; @tailwind utilities; @layer utilities { .animate-fadeIn { animation: fadeIn 0.3s ease-in-out; } } @keyframes fadeIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } } @keyframes expandRow { from { transform: scaleY(1); } to { transform: scaleY(1.5); } } @keyframes slideDown { from { opacity: 0; max-height: 0; transform: translateY(-10px); } to { opacity: 1; max-height: 100px; transform: translateY(0); } } .animate-expand { animation: expandRow 0.3s ease-out forwards; } .animate-slide-down { animation: slideDown 0.4s ease-out forwards; }

About

About