shadcn.io is not affiliated with official shadcn/ui
Employee Directory Table Block for React
A staff directory of twenty-four people grouped by surname letter in a fixed frame, with an A to Z rail that jumps to a letter, sticky letter cells, team badges and mailto links.
Installation
Overview
Find a colleague by the first letter of their surname, with this employee directory table for React with Base UI. Twenty-four people of a company directory tool sit in one native table inside a frame of fixed height, grouped by letter. A rail of letters at the end of the panel jumps the frame to a letter: a letter with nobody is disabled and shows a dash, and the letter at the top of the frame is marked as you scroll. Each letter is a cell that spans its people and sticks under the column heads, and each person is initials, a name, a title, a team badge, a place and a mailto: link. The jump sets the frame's own scroll position, so the page never moves, and the frame keeps its height. On a phone the rail becomes a sideways row above the table and the title, team and place fold into the name's cell. It's built from a native table, Avatar, Badge and Guides. For staff lists, member rosters, contact books and any list that people look up by name.
FAQ
How does the letter rail work?
There is one button for each of the 26 letters. Pressing one finds that letter's group in the table and sets the frame's scrollTop to it, less the height of the column heads, so the letter lands directly under them. A letter nobody's surname starts with is a disabled button that shows a dash and says "nobody" to a screen reader. The rail follows the scroll too: the letter at the top is read from the groups' positions and marked with aria-current.
How does the letter stay in view?
The first row of each letter holds a header cell that spans all that letter's rows (rowspan), and its letter sits in a sticky inner element. The table uses separate borders so cells keep their own rules while they stick, and the column heads are sticky too, on a solid background.
What happens on a phone?
The rail turns into one scrolling row of letters above the table. The title, team and place move under the name, and the email becomes an envelope button named "Email" followed by the person's name. Every column that is shown keeps a fixed width, so nothing scrolls sideways.
Is it accessible?
The table has a caption, column heads and the person's name as each row header. The letter cell is a rowgroup header whose name includes the number of people. The rail is a navigation landmark of real buttons, each named with its letter and how many people it holds, and the frame can be reached with Tab so its rows can be scrolled with the arrow keys.
Does it work right to left?
Yes. The rail and the table swap sides through logical classes, names and places are isolated so mixed scripts stay in order, and email addresses keep their left-to-right text and align to the end.
What stays local, and how do I wire it for real?
The people are typed at the top of the file and the email addresses are made from their names. For real data, load your staff sorted by surname in place of PEOPLE, keep the grouping helpers, and point the links at your people's real addresses or profile pages. Nothing is sent from this demo.