Properties

GridLayout

layout

• type: Array

This is the initial layout of the grid.

The value must be an Array of Object items. Each item must have i, x, y, w and h properties. Please refer to the documentation for GridItem below for more information.

responsiveLayouts

• type: Object
• required: false
• default: {}

This is the initial layouts of the grid per breakpoint if responsive is set to true. The keys of the Object are breakpoint names and each value is an Array of Object items as defined by layout prop. eg:{ lg:[layout items], md:[layout items] }. Setting the prop after the creation of the GridLayout has no effect.

colNum

• type: Number
• required: false
• default: 12

Says how many columns the grid has. The value should be a natural number.

rowHeight

• type: Number
• required: false
• default: 150

Says what is a height of a single row in pixels.

maxRows

• type: Number
• required: false
• default: Infinity

Says what is a maximal number of rows in the grid.

margin

• type: Array
• required: false
• default: [10, 10]

Says what are the margins of elements inside the grid. The value must be a two-element Array of Number. Each value is expressed in pixels. The first element is a margin horizontally, the second element is a vertical margin.

isDraggable

• type: Boolean
• required: false
• default: true

Says if the grids items are draggable.

isResizable

• type: Boolean
• required: false
• default: true

Says if the grids items are resizable.

isMirrored

• type: Boolean
• required: false
• default: false

Says if the RTL/LTR should be reversed.

autoSize

• type: Boolean
• required: false
• default: true

Says if the container height should swells and contracts to fit contents.

verticalCompact

• type: Boolean
• required: false
• default: true

Says if the layout should be compact vertically.

preventCollision

• type: Boolean
• required: false
• default: false

Says if grid items will move when being dragged over.

useCssTransforms

• type: Boolean
• required: false
• default: true

Says if the CSS transition-property: transform; should be used.

responsive

• type: Boolean
• required: false
• default: false

Says if the layout should be responsive to window width

breakpoints

• type: Object
• required: false
• default: { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }

Breakpoints defined for responsive layout. Sets widths on wich column number changes

cols

• type: Object
• required: false
• default: { lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }

Defines number of columns for each breakpoint

GridItem

i

• type: String
• required: true

This is the unique identifier of the item.

x

• type: Number
• required: true

Says what is a initial horizontal position of the item (in which column it should be placed). The value must be a whole number.

y

• type: Number
• required: true

Says what is a initial vertical position of the item (in which row it should be placed).

The value must be a whole number.

w

• type: Number
• required: true

Says what is a initial width of the item.

The value is a number that is multiplied by colWidth.

h

• type: Number
• required: true

Says what is a initial height of the item.

The value is a number that is multiplied by rowHeight.

minW

• type: Number
• required: false
• default: 1

Says what is a minimal width of the item. If w will be smaller then minW then w will be set to minW.

The value is a number that is multiplied by colWidth.

minH

• type: Number
• required: false
• default: 1

Says what is a minimal height of the item. If h will be smaller then minH then h will be set to minH.

The value is a number that is multiplied by rowHeight.

maxW

• type: Number
• required: false
• default: Infinity

Says what is a maximal width of the item. If w will be bigger then maxW then w will be set to maxW.

The value is a number that is multiplied by colWidth.

maxH

• type: Number
• required: false
• default: Infinity

Says what is a maximal height of the item. If h will be bigger then maxH then h will be set to maxH.

The value is a number that is multiplied by rowHeight

isDraggable

• type: Boolean
• required: false
• default: null

Says if item is draggable.

If default value is null then it's inherited from parent.

isResizable

• type: Boolean
• required: false
• default: null

Says if item is resizable.

If default value is null then it's inherited from parent.

static

• type: Boolean
• required: false
• default: false

Says if item is static (won't be draggable, resizable or moved by other items).

dragIgnoreFrom

• type: String
• required: false
• default: 'a, button'

Says which elements of the item shouldn't trigger drag event of the item.

The value is css-like selector string.

For more info please refer to ignoreFrom in interact.js docs.

dragAllowFrom

• type: String
• required: false
• default: null

Says which elements of the item should trigger drag event of the item.

The value is css-like selector string.

If null then one can drag by any (excluding dragIgnoreFrom) element of the item.

For more info please refer to allowFrom in interact.js docs.

resizeIgnoreFrom

• type: String
• required: false
• default: 'a, button'

Says which elements of the item shouldn't trigger resize event of the item.

The value is css-like selector string.

For more info please refer to ignoreFrom in interact.js docs.