I need a React component using ShadCN that displays a list of tables, where each table contains its columns and relationship details. The component should have the following functionality:
Tables List with Checkboxes:
Each table should have a checkbox next to its name.
The user should be able to select multiple checkboxes at the same time.
A button should be available next to each table for additional actions.
Expandable Table Details:
Clicking on a table name should expand/collapse its details.
The expanded section should display:
Field Details (list of columns and their types)
Relationship Details (foreign key relationships with other tables)
ShadCN UI Implementation:
The UI should be built using ShadCN components for a modern and clean design.
The expandable sections should be smooth and intuitive.
Ensure the component is optimized for handling a dynamic list of tables.
I'll create a React component using ShadCN UI that displays a list of tables with expandable details, checkboxes for selection, and action buttons.
This database tables explorer component includes:
Tables List with Checkboxes:
Expandable Table Details:
The expanded section shows:
Actions:
Visual Indicators:
The component uses ShadCN UI components including Accordion, Card, Table, Checkbox, Dropdown, and Badge to create a clean, modern interface with smooth expandable sections.
You can customize the mock data or connect it to your actual database schema information as needed.
I'll enhance the UI to make it more visually attractive while maintaining all the functionality.
I've significantly enhanced the visual appeal of the database tables explorer with the following improvements:
The UI now has a more professional, modern look while maintaining all the original functionality. The tabbed interface makes it easier to navigate between different aspects of each table, and the improved visual hierarchy helps users understand the database structure more intuitively.