Custom Items

This component comes with styling and options suitable for general organizational charts. The items in the data array must satisfy the OrgChartItem type.

type OrgChartItemId = string | number;

interface OrgChartItem {
    id: OrgChartItemId;
    subordinates?: OrgChartItemId[];
    assistant?: boolean;
    width?: number;
    height?: number;
    className?: string;
    style?: CSSProperties;
}

• The optional subordinates define the parent-child relationships and should only contain ids of other data items.
• If assistant is true, an item is an assistant to their superior and is placed on a separate layer between their superior and the non-assistant subordinates.
• The optional width and height define the render size of the item. If no values are given, the size is determined automatically.

The default visualization expects data items of type CustomOrgChartItem<Employee> where Employee is defined like this:

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

Moreover, the visualization of items is highly customizable. You can specify custom React components to render the items according to your specific requirements. Note that, to optimize performance and depending on the implementation, it might be necessary to use memoization for this custom component.