RenderOrgChartItem<TOrgChartItem extends OrgChartItem>

A default component that visualizes nodes in the organization chart. It is optimized for data items of the type Employee. However, it will render other properties, too. The component can be adjusted for each item individually or for all items at once by setting OrgChartItem.className or OrgChartItem.style in the data.

type Employee = {
  status: 'present' | 'busy' | 'travel' | 'unavailable'
  position: string
  name: string
  email: string
  phone: string
  icon: string
}

The component is already used as a fallback if no render prop is specified on OrgChart. However, it can be integrated in another component, for example to have different styles for different items.

function OrganizationChart() {
  const MyOrgChartItem = useMemo(
    () => (props: RenderItemProps<CustomOrgChartItem<Employee>>) => {
      const { dataItem } = props
      if (dataItem?.name === 'Eric Joplin') {
        return (
          <>
            <div
              style={{
                backgroundColor: 'blue',
                width: '100%',
                height: '100%'
              }}
            >
              <div>{dataItem.name}</div>
            </div>
          </>
        )
      } else {
        return <RenderOrgChartItem {...props}></RenderOrgChartItem>
      }
    },
    []
  )

  return (
    <OrgChart data={data} renderItem={MyOrgChartItem}></OrgChart>
  )
}

Props

NameDescriptionType
dataItem
The data item to render.
TDataItem
detail
The detail level of the visualization. Use this value to implement level-of-detail rendering.
”low” | “high”
focused
Whether the item is currently focused.
boolean
height
The height of the item.
number
hovered
Whether the item is currently being hovered.
boolean
selected
Whether the item is currently selected.
boolean
width
The width of the item.
number