RenderSupplyChainItem<TSupplyChainItem extends SupplyChainItem>

A default component that visualizes nodes in the supply chain. The detail view displays a data grid of all available properties on the data item. The overview visualization only shows the items name or id. 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 renderItem 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 MySupplyChainItem = useMemo(
      () => (props: RenderItemProps<SupplyChainItem>) => {
        const { dataItem } = props
        if (dataItem?.name?.includes('Plate')) {
          return (
            <>
              <div
                style={{
                  backgroundColor: 'lightblue',
                  width: '100%',
                  height: '100%'
                }}
              >
                <div>{dataItem.name}</div>
              </div>
            </>
          )
        } else {
          return <RenderSupplyChainItem {...props}></RenderSupplyChainItem>
        }
      },
      []
    )

    return (
      <SupplyChain data={data} renderItem={MySupplyChainItem}></SupplyChain>
    )
  }

Props

RenderItemProps

TDataItem

”low” | “high”

boolean

number

boolean

boolean

number