Group Controls

This section describes how you can customize the header component of each group.

const LeftComponent = (props: IDockviewHeaderActionsProps) => {
    return <div>{/** content */}</div>;
};

const RightComponent = (props: IDockviewHeaderActionsProps) => {
       return <div>{/** content */}</div>;
};

const PrefixComponent = (props: IDockviewHeaderActionsProps) => {
    return <div>{/** content */}</div>;
};

return <DockviewReact
  leftHeaderActionsComponent={LeftComponent}
  rightHeaderActionsComponent={RightComponent}
  prefixHeaderActionsComponent={PrefixComponent}
/>;

Live Example