Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Team blocks

Pro

Hybrid Week Desks Team Block for Svelte

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A hybrid-week desk table for Svelte with Ark 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".

How does the table behave on a narrow screen?

The person column is sticky, so a name stays visible while the days scroll under it, and each day keeps a minimum width. On a phone the avatar and the role are hidden so the name column is narrower.

What if someone visits another office?

Their cell simply holds that office's code: in the example Hana Kobayashi sits in Lisbon most days and in Berlin on Thursday ("BER-118"), and she counts under Berlin when Berlin is picked.

All 126 team blocks