Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Team blocks

Pro

Countries Table Team Block for React Aria

A remote-first CRM's people by country: region tabs over a table with each country's cities, its headcount as a number and a thin bar, and three of the people who live there.

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 "where we live" section for React with React Aria, for Farrowdale, a remote-first CRM. A start-aligned header sits over a ruled band of three region tabs (Americas, Europe and Asia-Pacific, each with its headcount) and one table of countries that ends the block. A country is a row: its name as the row header, its cities, its headcount as a number beside a thin bar, and three of the people who live there as initials avatars with a "+n" for the rest. All bars share one scale, so countries compare across the tabs, and each region's table has a visible caption with its total. On a phone the table keeps two columns, the country and the bar, with the cities and the people under the country. Every region is also drawn once, unseen, in the same grid cell, so switching regions moves nothing. It's built from Tabs, Avatar Group, Avatar and Guides, with a native table on every library. The people and their countries are invented.

FAQ

How do I add a country or a region?

Edit REGIONS at the top of the file. A region has an id, a label and its countries; a country has a name, its cities as one line, a count and three people. The tab counts, the captions and the header's totals are summed from the countries, and the bars are sized against the largest country in any region.

Why do the avatars not match the headcount?

The number is the headcount and the avatars are only three of those people, followed by "+n" for everyone else. Their names are in the page for assistive technology ("Includes Devi Kapoor, Sven Aldous, Marta Kowalska").

Is it a real table?

Yes: a native table with a caption, th column headers with scope="col" and each country as a th with scope="row". It is a native table on every library, because the React Aria catalog's table is a grid without captions or scopes.

How does the keyboard work?

Tab moves into the tab list, the arrow keys move between regions and Home and End jump to the ends; the table is plain content, so there is nothing else to tab to.

How does the table fit on a phone?

It keeps two columns, so nothing scrolls sideways: the country with its cities and its people under it, and the headcount with its bar. The Cities and Who lives there columns come back from the medium breakpoint.

Does the block change height when I switch regions?

No. Every region's table is also drawn once, unseen and hidden from assistive technology, in the same grid cell, so the cell is as tall as the tallest table.

All 126 team blocks