Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Table Block Scheduling Grid
Table component with time slot scheduling grid showing availability for React booking and calendar interfaces
Looking to implement shadcn/ui blocks?
Join our Discord community for help from other developers.
Schedule appointments on your Next.js booking dashboard with this scheduling table component. Features time slots as rows, days as columns, availability status indicators, click to book interactions, booked slot details on hover, and conflict highlighting. Built with shadcn/ui Table and Tooltip components using Tailwind CSS. The grid layout enables quick availability scanning perfect for appointment booking, meeting room reservations, class schedules, resource allocation, or any React app requiring time-based slot selection.
Weekly Schedule
Jan 15 - Jan 19, 2024
Mon Jan 15 | Tue Jan 16 | Wed Jan 17 | Thu Jan 18 | Fri Jan 19 | |
|---|---|---|---|---|---|
| 9:00 AM | Project Review | Standup | Standup | ||
| 9:30 AM | Project Review | ||||
| 10:00 AM | 1:1 Meeting | Design Review | |||
| 10:30 AM | 1:1 Meeting | Design Review | |||
| 11:00 AM | Client Call | Tech Sync | |||
| 11:30 AM | Client Call | ||||
| 12:00 PM | |||||
| 12:30 PM | |||||
| 1:00 PM | Interview | ||||
| 1:30 PM | Planning | Interview | |||
| 2:00 PM | Sprint Review | Planning | Retrospective | ||
| 2:30 PM | Sprint Review | Retrospective |
Installation
Related blocks you will also like
Table with Heatmap Cells
Visual density
Table with Row Selection
Select slots
Table with Color Indicators
Status colors
Table with Quick Filters
Filter by status
Table with Checkbox Toggles
Toggle availability
Table with Row Comparison
Compare schedules