Paneview

A paneview is a collapsed collection of vertically stacked panels and panel headers. The panel header will always remain visible however the panel will only be visible when the panel is expanded.

info

Paneview panels can be re-ordered by dragging and dropping the panel headers.

---

Introduction

Simple Paneview example

import {
    IPaneviewPanelProps,
    PaneviewReact,
    PaneviewReadyEvent,
} from 'dockview';

const components = {
    default: (props: IPaneviewPanelProps<{ title: string }>) => {
        return (
            <div
                style={{
                    padding: '10px',
                    height: '100%',
                    backgroundColor: 'rgb(60,60,60)',
                }}
            >
                {props.params.title}
            </div>
        );
    },
};

SimplePaneview = () => {
    const onReady = (event: PaneviewReadyEvent) => {
        event.api.addPanel({
            id: 'panel_1',
            component: 'default',
            params: {
                title: 'Panel 1',
            },
            title: 'Panel 1',
        });

        event.api.addPanel({
            id: 'panel_2',
            component: 'default',
            params: {
                title: 'Panel 2',
            },
            title: 'Panel 2',
        });

        event.api.addPanel({
            id: 'panel_3',
            component: 'default',
            params: {
                title: 'Panel 3',
            },
            title: 'Panel 3',
        });
    };

    return (
        <PaneviewReact
            components={components}
            headerComponents={headerComponents}
            onReady={onReady}
            className="dockview-theme-abyss"
        />
    );
};

PaneviewReact Component

You can create a Paneview through the use of the ReactPaneview component.

import { ReactPaneview } from 'dockview';

Property	Type	Optional	Default	Description
onReady	(event: SplitviewReadyEvent) => void	No
components	object	No
headerComponents	object	Yes
className	string	Yes	''
disableAutoResizing	boolean	Yes	false	Auto Resizing
disableDnd	boolean	Yes	false
onDidDrop	Event	Yes

Paneview API

The Paneview API is exposed both at the onReady event and on each panel through props.containerApi. Through this API you can control general features of the component and access all added panels.

Paneview API via Panel component

const MyComponent = (props: IGridviewPanelProps<{ title: string }>) => {
    // props.containerApi...

    return <div>{`My first panel has the title: ${props.params.title}`}</div>;
};

Paneview API via the onReady callback

const onReady = (event: GridviewReadyEvent) => {
    // event.api...
};

Property	Type	Description
height	number	Component pixel height
width	number	Component pixel width
minimumSize	number	The sum of the minimumSize property for each panel
maximumSize	number	The sum of the maximumSize property for each panel
length	number	Number of panels
panels	IPaneviewPanel[]	All panels
onDidLayoutChange	Event<void>	Fires on layout change
onDidLayoutFromJSON	Event<void>	Fires of layout change caused by a fromJSON deserialization call
onDidAddView	Event<IPaneviewPanel>	Fires when a view is added
onDidRemoveView	Event<IPaneviewPanel>	Fires when a view is removed
onDidDrop	Event<PaneviewDropEvent	Fires on an external drop event (See Drag and Drop)
addPanel	addPanel(options: AddPaneviewComponentOptions): IPaneviewPanel
removePanel	(panel: IPaneviewPanel): void
movePanel	(from: number, to: number): void
getPanel	(id:string): IPaneviewPanel \| undefined
focus	(): void	Focus the active panel, if exists
layout	(width: number, height:number): void	See Auto Resizing
fromJSON	(data: SerializedPaneview): void	Serialization
toJSON	(): SerializedPaneview	Serialization
clear	(): void	Clears the current layout

Paneview Panel API

const MyComponent = (props: IGridviewPanelProps<{ title: string }>) => {
    // props.api...

    return <div>{`My first panel has the title: ${props.params.title}`}</div>;
};

Property	Type	Description
id	string	Panel id
isFocused	boolean	Is panel focsed
isActive	boolean	Is panel active
isVisible	boolean	Is panel visible
width	number	Panel width
height	number	Panel height
onDidDimensionsChange	Event<PanelDimensionChangeEvent>
onDidFocusChange	Event<FocusEvent>
onDidVisibilityChange	Event<VisibilityEvent>
onDidActiveChange	Event<ActiveEvent>
onDidConstraintsChange	onDidConstraintsChange: Event<PanelConstraintChangeEvent>
setVisible	(isVisible: boolean): void
setActive	(): void
setConstraints	(value: PanelConstraintChangeEvent2): void;
setSize	(event: SizeEvent): void

Advanced Features

Custom Header

You can provide a custom component to render an alternative header.

You can provide a headerComponent option when creating a panel to tell the library to use a custom header component.

const onReady = (event: PaneviewReadyEvent) => {
    event.api.addPanel({
        id: 'panel_1',
        component: 'default',
        headerComponent: 'myHeaderComponent',
        params: {
            valueA: 'A',
        },
        title: 'Panel 1',
    });
};

This header must be defined in the collection of components provided to the headerComponents props for ReactPaneivew

import { IPaneviewPanelProps } from 'dockview';

const MyHeaderComponent = (props: IPaneviewPanelProps<{ title: string }>) => {
    const [expanded, setExpanded] = React.useState<boolean>(
        props.api.isExpanded
    );

    React.useEffect(() => {
        const disposable = props.api.onDidExpansionChange((event) => {
            setExpanded(event.isExpanded);
        });

        return () => {
            disposable.dispose();
        };
    }, []);

    const onClick = () => {
        props.api.setExpanded(!expanded);
    };

    return (
        <div
            style={{
                padding: '10px',
                height: '100%',
                backgroundColor: 'rgb(60,60,60)',
            }}
        >
            <a
                onClick={onClick}
                className={expanded ? 'expanded' : 'collapsed'}
            />
            <span>{props.params.title}</span>
        </div>
    );
};

const headerComponents = { myHeaderComponent: MyHeaderComponent };

Drag And Drop

If you provide the PaneviewReact component with the prop onDidDrop you will be able to interact with custom drop events.

Drag me

Interactions

You can safely create multiple paneview instances within one page. They will not interact with each other by default.

If you wish to interact with the drop event from one paneview instance in another paneview instance you can implement the showDndOverlay and onDidDrop props on PaneviewReact.

As an example see how dragging a header from one control to another will only trigger an interactable event for the developer if the checkbox is enabled.

Enable external events