Skip to main content

Grid Layout

This layout arranges elements into a grid.

Grid layout
Vanilla JS
React
Angular
Vue
Svelte
import { newInstance,
	GridLayout } from "@jsplumbtoolkit/browser-ui"

const toolkit = newInstance()
    
const surface = toolkit.render(someElement, {
  "layout": {
    "type": GridLayout.type
  }
});

Fixed column/row count​

You can fix the number of columns/rows via the columns or rows option - here we display the same dataset but with 2 columns.

Vanilla JS
React
Angular
Vue
Svelte
import { newInstance,
	GridLayout } from "@jsplumbtoolkit/browser-ui"

const toolkit = newInstance()
    
const surface = toolkit.render(someElement, {
  "layout": {
    "type": GridLayout.type,
    "options": {
      "columns": 2
    }
  }
});
Grid layout
note

If you supply a fixed value for columns and for rows, JsPlumb will only honour the columns value.

Parameters​

Interface GridLayoutParameters

NameTypeDescription
columns?numberOptional fixed number of columns. By default this is set to -1 - meaning not fixed - which will result in the layout making its best effort at drawing a grid of equal width and height
height?numberOptional fixed height for the layout.
horizontalAlignment?Optional alignment for horizontal placement in cells. Defaults to center.
locationFunction?LocationFunctionOptional function that, given some vertex, can provide the x/y location of the vertex on the canvas
orientation?Whether to lay out items row first or column first. Additionally, this setting will determine where any extra items are placed if the dataset does not conform to a grid of equal width and height
padding?PointXYOptional padding to put around the elements. Defaults to 30 pixels in each axis.
rows?numberOptional fixed number of rows. By default this is set to -1 - meaning not fixed - which will result in the layout making its best effort at drawing a grid of equal width and height.
verticalAlignment?Optional alignment for vertical placement in cells. Defaults to center.
width?numberOptional fixed width for the layout.

Column Layout​

This is a specialized instance of GridLayout with the number of columns fixed to 1.

Grid layout

Parameters​

Example​

Vanilla JS
React
Angular
Vue
Svelte
import { newInstance,
	ColumnLayout } from "@jsplumbtoolkit/browser-ui"

const toolkit = newInstance()
    
const surface = toolkit.render(someElement, {
  "layout": {
    "type": ColumnLayout.type
  }
});

Row Layout​

This is a specialized instance of GridLayout with the number of rows fixed to 1.

Grid layout

Parameters​

Example​

Vanilla JS
React
Angular
Vue
Svelte
import { newInstance,
	RowLayout } from "@jsplumbtoolkit/browser-ui"

const toolkit = newInstance()
    
const surface = toolkit.render(someElement, {
  "layout": {
    "type": RowLayout.type
  }
});