Directory

← Back

GridLayout

Addon that recreates some of the functionalities of Vaadin 7 Grid Layout component for Vaadin Flow

Author

Rating

Popularity

500+

Grid Layout component provides support to the following features:

  • Creating a GridLayout with predefined number of columns & rows
  • Setting spacing & margin
  • Adding components

Sample code

    GridLayout grid = new GridLayout(4, 4);
    grid.setMargin(true);
    
    // Need to define width & height for the layout.
    grid.setWidth("406px");
    grid.setHeight("353px");   

    // Fill out the first row using the cursor.
    Button brc1 = new Button("R/C 1");
    brc1.setWidth("100%");
    grid.addComponent(brc1);

    for (int i = 0; i < 3; i++) {
        int col = grid.getCursorX() + 1;
        Button b  = new Button("Col " + col);
        b.setWidth("100%");
        grid.addComponent(b);
    }

    // Fill out the first column using coordinates.
    for (int i = 1; i < 4; i++) {
        Button b = new Button("Row " + i);
        b.setHeight("100%");
        grid.addComponent(b, 0, i);
    }

    // Add some components of various shapes.
    Button b = new Button("3x1 button");
    b.setWidth("100%");
    grid.addComponent(b, 1, 1, 3, 1);
    grid.addComponent(new Label("1x2 cell"), 1, 2, 1, 3);
    Div div = new Div();
    div.setText("A 2x2 div field");
    div.setWidth("252px");
    div.setHeight("248px");
    grid.addComponent(div, 2, 2, 3, 3);

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

Bug fixes:

  • Avoid removing all components on insert to improve performance (#7)
Released
2023-12-04
Maturity
TESTED
License
Apache License 2.0

Compatibility

Framework
Vaadin 14+
Browser
Firefox
Safari
Google Chrome
iOS Browser
Android Browser
Microsoft Edge

GridLayout - Vaadin Add-on Directory

Addon that recreates some of the functionalities of Vaadin 7 Grid Layout component for Vaadin Flow GridLayout - Vaadin Add-on Directory
Grid Layout component provides support to the following features: * Creating a GridLayout with predefined number of columns & rows * Setting spacing & margin * Adding components
Online