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

RenderItemProps

TDataItem

”low” | “high”

boolean

number

boolean

boolean

number