I'll create a trans stake table with row collapsibility using shadcn/ui components. The table will display user information in the parent rows and show task lists when expanded. Here's the implementation:

This implementation creates a trans stake table with the following features:

1. Row collapsibility: Each user row can be expanded to show their tasks.
2. Parent rows show user information: The main rows display the user's name, email, and role.
3. Expanded rows show task lists: When a row is expanded, it shows the list of tasks for that user.

Here's a breakdown of the component:

1. We import necessary components from shadcn/ui, including Table, Collapsible, and Button components.
2. Mock data is provided for demonstration purposes, including user information and their tasks.
3. The TransStakeTable component uses a state variable expandedRows to keep track of which rows are expanded.
4. The toggleRow function handles the expansion and collapse of rows.
5. The table structure is created using shadcn/ui's Table components.

6. Each user is represented by two table rows:

   • The first row contains the user's information and an expand/collapse button.
   • The second row contains a Collapsible component that shows the user's tasks when expanded.
7. The Collapsible component is used to create the expandable section for each user's tasks.
8. ChevronDown and ChevronUp icons from Lucide React are used to indicate whether a row is expanded or collapsed.

To use this component in your project, you would typically place it in a page or layout file, like so:

This implementation provides a clean and interactive way to display user information and their associated tasks in a collapsible table format, meeting your specified requirements. You can further customize the styling or add more functionality as needed.

I'll modify the trans stake table to include the task details you've requested. The task list will now be a table with columns for title, status, priority, and assigned to. Here's the updated implementation:

I've updated the TransStakeTable component to include the task details you requested. Here's a breakdown of the changes and features:

1. Task Table: The expanded content now contains a table with columns for title, status, priority, and assigned to.
2. Mock Data: I've updated the mock data to include the new task properties (priority and assignedTo).
3. Status and Priority Styling: I've added color-coded badges for status and priority to make them visually distinct and easy to read at a glance.
4. Responsive Design: The table is responsive and will adapt to different screen sizes.
5. Accessibility: The expand/collapse buttons have appropriate aria-labels for screen readers.

To use this component in your project, you can place it in a page or layout file like this:

This implementation provides a detailed view of user tasks with all the requested information, while maintaining the collapsible row feature for a clean and organized display. You can further customize the styling or add more functionality as needed.