Org Chart Outline

ProNew

A reporting-line tree with initials avatars, job titles and the total number of people under each manager. Use this when you need an org chart that works with a keyboard and a screen reader, not only a picture.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.

Guide and examples

When to use it

Use it for people directories, onboarding pages and admin tools that must show who reports to whom.

Do not use it for a printed or presentation org chart (draw boxes) or for matrix organisations where a person has several managers.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`people`	`TreeNode<Person>[]`	-	Managers have children; `data.title` is the job title.
`defaultExpanded`	`string[]`	`top level`	Open managers.
`onSelect`	`(person) => void`	-	A person was selected.

Accessibility

Each row's name is "Name, Title, n reports"; avatars are decorative (aria-hidden).
Right and Left follow the reporting line; the tree has one tab stop.
Guide lines are decorative.

Testing

The pattern ships with a Testing Library test (org-chart-outline.test.tsx) that covers the spoken row, the roll-up count, keyboard travel and selection.

Guide and examples

When to use it

Use it for people directories, onboarding pages and admin tools that must show who reports to whom.

Do not use it for a printed or presentation org chart (draw boxes) or for matrix organisations where a person has several managers.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`people`	`TreeNode<Person>[]`	-	Managers have children; `data.title` is the job title.
`defaultExpanded`	`string[]`	`top level`	Open managers.
`onSelect`	`(person) => void`	-	A person was selected.

Accessibility

Each row's name is "Name, Title, n reports"; avatars are decorative (aria-hidden).
Right and Left follow the reporting line; the tree has one tab stop.
Guide lines are decorative.

Testing

The pattern ships with a Testing Library test (org-chart-outline.test.tsx) that covers the spoken row, the roll-up count, keyboard travel and selection.