Gridview

Introduction

GridviewReact Component

import { ReactGridview } from 'dockview';

Property	Type	Optional	Default	Description
onReady	(event: SplitviewReadyEvent) => void	No
components	object	No
orientation	Orientation	Yes	Orientation.HORIZONTAL
proportionalLayout	boolean	Yes	true	See Proportional layout
hideBorders	boolean	Yes	false
className	string	Yes	''
disableAutoResizing	boolean	Yes	false	See Auto Resizing

Gridview API

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

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

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

Property	Type	Description
height	number	Component pixel height
width	number	Component pixel width
minimumHeight	number
maximumHeight	number
maximumWidth	number
maximumWidth	number
length	number	Number of panels
panels	ISplitviewPanel[]	all panels
orientation	Orientation
onDidLayoutChange	Event<void>	Fires on layout change
onDidLayoutFromJSON	Event<void>	Fires of layout change caused by a fromJSON deserialization call
onDidAddPanel	Event<IGridviewPanel>	Fires when a view is added
onDidRemovePanel	Event<IGridviewPanel>	Fires when a view is removed
onDidActivePanelChange	Event<IGridviewPanel \| undefined>	Fires when the active group changes
addPanel	addPanel(options: AddComponentOptions): IGridviewPanel
removePanel	(panel: IGridviewPanel, sizing?: Sizing): void
movePanel	(panel: IGridviewPanel, options: {direction: Direction, refernece:string, size?: number}): void
getPanel	(id: string) \| IGridviewPanel \| undefined
updateOptions	(options:SplitviewComponentUpdateOptions): void
focus	(): void	Focus the active panel, if exists
layout	(width: number, height:number): void	Auto Resizing
fromJSON	(data: SerializedGridview): void	Serialization
toJSON	(): SerializedGridview	Serialization
clear	(): void	Clears the current layout

Gridview 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

Events

GridviewReact exposes a number of events that the developer can listen to and below is a simple example with a log panel showing those events that occur.

fromJSON