I'll create an expandable table similar to Ant Design's table with row expansion functionality using Next.js, Tailwind CSS, and shadcn/ui components.

This expandable table has the following features:

1. Each row has a chevron icon on the left side
2. Clicking the icon expands the row to show additional details
3. The icon rotates 90 degrees when the row is expanded
4. The expanded section shows contact information, employment details, and projects
5. The table is styled with Tailwind CSS to look similar to Ant Design's aesthetic
6. Status indicators use colored badges

The implementation uses:

• React's useState hook to track which rows are expanded
• Tailwind CSS for styling
• Lucide React for the chevron icon
• Next.js App Router structure

I'll create an expandable table using Ant Design with Next.js. First, we need to install the Ant Design package:

To use this Ant Design table, you'll need to install the required packages. Run the following command in your project directory:

This implementation includes:

1. A fully functional Ant Design table with expandable rows
2. Custom expand/collapse icons (RightOutlined and DownOutlined)

3. Formatted content in the expanded rows showing:

   • Contact information
   • Employment details
   • Projects with blue tags
4. Status indicators using Ant Design's Tag component
5. Controlled expansion state with React hooks

The table follows Ant Design's styling guidelines and component structure. When you click on the arrow icon for each row, it will expand to show the additional details for that person.