shadcn.io is not affiliated with official shadcn/ui
Hybrid Week Desks Team Block for React
A coworking company's hybrid week as a table: eight people by Monday to Friday, each cell a desk code like BER-214 or Remote, a who-is-in count under each day and a select to look at one office.
Installation
Overview
A hybrid-week desk table for React with Base UI, for Fiddlesby & Wren, a coworking company with three floors. A start-aligned header carries an office select at its end, then a table runs rail to rail and ends the block. Eight people are the rows and Monday to Friday the columns; each cell is the desk they sit at (the office code and the desk, like "BER-214") or "Remote", and a last row counts who is in on each day. Picking Berlin, Lisbon or Nairobi bolds the desks on that floor, mutes everything else and makes the counts that floor's alone; "All offices" shows the whole week again. The person column stays in place while the days scroll sideways on a narrow screen. It's built from Table, Select, Avatar and Guides, with your theme's tokens for every colour. For a members page, a facilities view or a team page that says where people sit. The people and the desks are invented.
FAQ
How do I change the people, desks and offices?
Edit PEOPLE at the top of the file: each person has a name, a role and a week, five desk codes from Monday to Friday, with an empty string for a remote day. The first three letters of a code are the office. OFFICES lists the select's options, each with the office code as its value. The counts are worked out from the codes.
What does the select do?
It looks at one office. Desks on that floor turn bold on a tinted cell, every other cell, remote days included, goes muted, and the last row counts only that floor ("3 in Berlin"). A polite line also reads the week's counts for that office. It filters nothing out, so the table never changes height.
Is it a real table, and how does the keyboard work?
Yes: a table with a name, people as row headers and days as column headers. It's a native table. Its scroll area is a labelled region that takes Tab, so the arrow keys can scroll the days on a narrow screen. The select has the name "Office".
Related
- Pro
Time Off Calendar Team
Hours and placesA four-week grid of Monday to Friday for a shift-scheduling company, with the avatars of people away in each day, a coverage row under every week, the thinnest week flagged and the reasons listed in plain words.
- Pro
Status Board Team
Hours and placesA three-column board of Online, In focus and Away for a project tracker's team, each person with their activity and local time, and a Set my status group that moves one 'You' avatar between the columns.
- Pro
Time Zone Axis Team
Hours and placesTen people of a remote-first payroll company laid along an axis of UTC offsets, each office with its avatars, a live local time and a shaded band where it is working time, over six cells that list the same zones.
- Pro
Office Bands Team
Hours and placesThree offices of a hotel revenue-software company as bands that run from rail to rail: the city and its address, the local time there, the headcount, and three of the people you will meet in cells that share their hairlines.
- Pro
Status Filter Team
Hours and placesA live-chat widget's eight people in rows under a ruled pill filter (All, Online, Away, Busy) with counts, each row showing a presence dot, what they are doing and when they were last seen.
- Pro
Floor Plan Team
Hours and placesA coworking brand's third floor drawn as a greyscale plan with eight desks you can pick, a legend of the rooms in text, and the person at the chosen desk with their room, their days and what is on their desk.