GridStack Add-on
gridstack.js based "drag-and-drop multi-column grid" layouting to Vaadin applications
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!"));
Links
Compatibility
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