RenderSupplyChainGroup<TSupplyChainItem extends SupplyChainItem>

A default component that visualizes group and folder nodes in the supply chain. It provides a collapse/expand button and shows the group’s name or id as header. Additionally, the collapsed folder shows the number of children that are hidden within the folder node. The component can be adjusted for each item individually or for all items at once by setting SupplyChainBaseItem.className or SupplyChainBaseItem.style in the data.

The component is used as the default visualization if no renderGroup prop is specified on SupplyChain. However, it can be integrated in another component, for example, to have different styles for different items.

function SupplyChainComponent() {
    const MySupplyChainGroup = useMemo(
      () => (props: RenderGroupProps<SupplyChainItem>) => {
        const { dataItem } = props
        const { isFolderNode } = props
        const supplyChainContext = useSupplyChainContext()

        if (dataItem?.name?.includes('Material')) {
          return (
            <div
              style={{
                width: '100%',
                height: '100%',
                overflow: 'hidden',
                backgroundColor: isFolderNode ? 'lightblue' : 'white'
              }}
            >
              {isFolderNode && (
                <button onClick={() => supplyChainContext.toggleExpansionState(dataItem)}>
                  Expand {dataItem.name}
                </button>
              )}
              {!isFolderNode && (
                <div style={{ display: 'flex', justifyItems: 'flex-start', alignItems: 'center' }}>
                  <button onClick={() => supplyChainContext.toggleExpansionState(dataItem)}>
                    Collapse {dataItem.name}
                  </button>
                </div>
              )}
            </div>
          )
        } else {
          return <RenderSupplyChainGroup {...props}></RenderSupplyChainGroup>
        }
      },
      []
    )

    return (
      <SupplyChain data={data} renderGroup={MySupplyChainGroup}></SupplyChain>
    )
  }

Props

RenderGroupProps

TDataItem

”low” | “high”

boolean

number

boolean

boolean

boolean

number