Directory

← Back

GridStack Add-on

gridstack.js based "drag-and-drop multi-column grid" layouting to Vaadin applications

Author

Contributors

Rating

GridStackLayout provides drag'n drop multi-column grid layouts for Vaadin applications. Implementation is based on gridstack.js library written by Pavel Reznikov.

This add-on uses Apache 2.0 license, see license of dependencies from project's GitHub page.

If you do not need all features of GridStack, also check my Masonry add-on: https://vaadin.com/directory#!addon/masonry

Sample code

// Creates new GridStack with 3 columns
GridStackLayout gridStack = new GridStackLayout(3);

// Adds label to top left corner, reserving 1 slot
gridStack.addComponent(new Label("Hello World"), 0, 0);

// Adds second label next to earlier, now reserving 2 slots in horizontal
gridStack.addComponent(new Label("Lorem ipsum"), 1, 0, 2, 1);

// Finally add label, and let client side to find location for it (will go to next row, as first is full)
gridStack.addComponent(new Label("Find me space!"));

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

  • Add method to set style name for item wrapper
  • Alternative paper styling from Masonry add-on
  • gridstack-initializing and gridstack-ready stylenames added to allow advanced theming
Released
2017-06-21
Maturity
BETA
License
Apache License 2.0

Compatibility

Framework
Vaadin 8.0+
Vaadin 7.5+ in 0.3.2
Browser
Firefox
Opera
Safari
Google Chrome
iOS Browser
Android Browser
Internet Explorer
Windows Phone
Microsoft Edge
Online