Easily create dynamic and responsive dashboards with Gridstack.js. Ideal for projects involving React, Vue, Angular, and more.

As with any virtual DOM based framework, you need to check if Vue has rendered the DOM (or any updates to it) before you initialize GridStack or call its methods.

Vue2.js Vue3.js Vue3: Gridstack Controls Vue Rendering Grid Item Content Vue3: Gridstack Controls Vue Rendering Grid Item Vue3 with v-for Vue3: Render GridStack item content using …

If you add elements to your grid by hand (or have some framework creating DOM), you have to tell gridstack afterwards to make them widgets. If you want gridstack to add the elements for you, use …

Classes GridStack GridStackEngine Utils DDBaseImplement DDDraggable DDDroppable DDElement DDGridStack DDManager DDResizable DDResizableHandle Interfaces GridStackOptions …

The original client list of items is not updated to match content changes made by gridstack (TBD later), but adding new item or removing (as shown in demo) will update those new items.

Defines the GridStack engine that handles all grid layout calculations and node positioning. This is the core engine that performs grid manipulation without any DOM operations.

local override of GridStack.resizeToContentParent that specify the class to use for the parent (actual) vs child (wanted) height

If you are using a nonce-based Content Security Policy, pass your nonce here and GridStack will add it to the <style> elements it creates.

Learn how to integrate GridStack.js with React.js to build dynamic and responsive dashboards.