Configuring the Layout

Next we need to configure the initial layout (the user can move things around later).
For this example we'll create a big component on the left of the screen and two smaller ones on the right,
on top of each other, like so:

All GoldenLayout structures are created from three building blocks: Rows, Columns and Stacks. Row's arrange items from left to right, Columns from top to bottom and Stacks from front to back (as a tab-strip). These can be nested.

The actual parts that your app is composed of (forms, charts, tables etc.) are referred to as "components". Components can be put into any of these building blocks.

For our example we'll start with a row. The first item in this row is the big component that we want to put on the left hand side (A). To the right we want two components on top of each other (B and C) - so we need to put them into a column.

This needs a bit of explanation. myLayout.registerComponent takes two arguments: the name of the component and a constructor or factory function.
This function is called by GoldenLayout with new - which creates an instance of your component if you've provided a constructor - or just executes the function if not.

The function receives two arguments.

container is an object that allows you to interact with the box that your compontent lives in. It gives you access to the DOM element, emits all sorts of events like resize, hide, close etc. and provides methods like setSize() or setState(). Read more about container here

componentState is what you've specified in the configuration, e.g. { label: 'C' }

Your component's instance or whatever your function returns is stored and can later be accessed from myLayout.