All components (244)

Org chart

Data · OrganizationTree · .amset-org

What it is and when to use it

An org chart: who reports to whom, with their position and how many people report to them.

When to use it

The structure of a company or a department, to find someone and see who they report to.
nodes is the tree: each person with name, title, src and their children.
layout="chart" paints top-down boxes joined by lines (it scrolls sideways if wider than the screen); layout="list", an indented list for narrow screens or very wide trees.
defaultDepth says to which level it starts expanded; "Expand all" and "Collapse all" are at the top. onSelect opens a person's profile.

When not to

A tree of folders or categories: Tree.
Editing the structure by dragging: here it is only consulted.

Keyboard: it is a single tab stop. Up and down arrows between people, right expands or goes down to their team, left collapses or goes up to their manager, Home and End to the ends, and Enter selects.

Accessibility: it is an ARIA tree with level, position and expanded state on each person; the number of reports is written out.

Fine appearance: variables --amset-org-line (the colour of the lines) and --amset-org-gap (the spacing between levels).

What it looks like

Aitor MenaAddress3 direct or indirect reports
- Marta RuizSales1 direct or indirect report
  - Lucía FerrerOnline shop
- Carla GilOperations

<OrganizationTree
  label="Team"
  nodes={organigrama}
  layout="chart"
  selectedId={elegido}
  onSelect={(nodo) => setElegido(nodo.id)}
/>

Props

Import it with import { OrganizationTree } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`label`required	`string`	Which org chart it is («Acme org chart»). Required.
`nodes`required	`readonly OrgNode[]`	—
`className`	`string`	Merged with the library classes; it does not replace them.
`defaultDepth`	`number`	To which level it starts expanded. 2 by default.
`layout`	`OrganizationLayout`	`chart`: top-down boxes with their lines. `list`: indented list, for narrow screens or wide trees.
`onSelect`	`(node: OrgNode) => void`	When a person is pressed (Enter or click): open their profile.
`selectedId`	`string`	The person marked as selected.

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

CSS variables

These CSS variables are how you adapt it. Declare them on the component's selector, not on :root: the stylesheet redeclares them in the rule itself, and a declaration on the same element always wins.

Variable	Default
`--amset-org-line`	`var(--amset-border-bold)`
`--amset-org-gap`	`var(--amset-space-4)`

How to change it

.amset-org {
  --amset-org-line: ...;
  --amset-org-gap: ...;
}

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: