Skip to main content


This page contains structured information that will help you to start working with DHTMLX Layout and go into deep dive on its functionality.

How to start with DHTMLX Layout

In this section you can find out how to initialize Layout, how to attach the necessary components to its cells, and how to integrate a Layout into your applications.


Basic initializationLearn how to initialize a Layout (Example)
Attaching widgetsLearn how to attach a DHTMLX component to a Layout cell or detach it (Example)


Backend integrationLearn how to connect DHTMLX Suite to a backend (Demo)
OptimusLearn how to use DHTMLX Optimus framework for creating DHTMLX-based app
(recommended framework for creating apps with Suite components)
React integrationLearn how to use DHTMLX Layout with React (Demo)
Angular integrationLearn how to use DHTMLX Layout with Angular (Demo)
Vue integrationLearn how to use DHTMLX Layout with Vue.js (Demo)

How to configure Layout

In this section you will know how to build a horizontal, vertical, or mixed layout, and how to add borders or space between cells.

Defining Layout structureLearn how to create a Layout of the necessary structure
Adding borders to cells Learn how to configure the borders or add space between cells in Layout (Example 1, Example 2)

How to configure Layout cells

In this section you can find out how to configure the size and visibility of cells, how to add a cell header and configure its height, and more.

Making a cell resizableLearn how to configure the ability to change the size of a cell by dragging its borders (Example)
Making cells hiddenLearn how to render a layout with some hidden cells
Adding the header to a cellLearn how to add a header for a cell (Example)
Configuring content alignmentLearn how to set the alignment of content inside a cell (Example)
Configuring paddingsLearn how to configure the distance between a cell and the Layout border (Example)
Initializing a collapsed cellLearn how to initialize a collapsed cell and provide the ability to expand it (Example 1, Example 2)
Showing a progress bar by defaultLearn how to render the progress bar in a cell in the absence of the component/HTML content in the cell

How to configure sizes of Layout cells

In this section you will learn how to configure sizes of Layout cells and their headers.

Width and height of a cellLearn how to configure the width and height of a cell (Example)
Size of a cell within a rowLearn how to define the "weight" of a cell in relation to other cells placed in the same row and within one parent (Example)
Height of the cell's headerLearn how to configure the height of the header of a cell

How to customize Layout and its cells

In this section you can learn how to configure the style of Layout and its cells.

Rendering HTML contentLearn how to render HTML content in a cell on Layout initialization (Example)
Attaching HTML contentLearn how to attach HTML content into a cell dynamically or detach it
Styling (custom CSS)Learn how to apply custom styles to a Layout cell (Example)
List of CSS classesA set of CSS classes provided by the DHTMLX library

How to work with Layout cells

In this section you will learn how to get a cell object, how to add or remove, hide or show, expand or collapse a cell, etc.

Removing a cellLearn how to remove a cell from Layout (Example)
Iterating over all cellsLearn how to iterate over Layout cells (Example)
Getting a cell objectLearn how to get a configuration object of a particular cell
Showing/hiding a cellLearn how to hide/show a cell (Example 1, Example)
Checking visibility of a cellLearn how to check whether a Layout cell is visible
Expanding/collapsing a cellLearn how to collapse/expand a cell (Example 1, Example 2)
Showing/hiding a progress barLearn how to show/hide the progress bar in a Layout container or in a cell (Example)

Layout patterns

How to work with Layout events

This section explains how to work with Layout events.

Event basic rulesLearn basic rules on how to work with events
Event handlingLearn how to attach, detach, or call the Layout events (Example)

API reference

In this section you can find out corresponding references of Layout and Layout cells API.

Layout API

Layout methodsCheck the list of Layout methods
Layout eventsCheck the list of Layout events
Layout propertiesCheck the list of Layout properties

Layout cell API

Layout cell methodsCheck the list of methods of a Layout cell
Layout cell propertiesCheck the list of properties of a Layout cell

Common functionality

In this section you will learn about common functionality of the library which can be useful while working with Layout.

Touch supportLearn how to work with touch support
TypeScript supportLearn how to work with TypeScript
Custom scrollLearn how to enable custom scroll in Layout cells
AwaitRedrawLearn how to perform the code after the component’s rendering

Any questions left?


Do you need more functionality? Feel free to share your suggestions in the comments below!