How to set column alignment in grid

Flow
1

I can’t find any examples or documentation on how to change the text alignment from left to center or right in a grid.

2

There’s no helper for this out-of-the-box at the moment. There’s an enhancment issue waiting, though: https://github.com/vaadin/vaadin-grid/issues/605

And a related issue which also mentions helpers for this: https://github.com/vaadin/vaadin-grid/issues/492

The current solution is to use a column template, where you use a HTML element wrapper and some CSS for it to align the content.

3

For some reason my grid is centering the column content by default.

I used the following to align text content:

        grid.addColumn(TemplateRenderer.<Product> of(
                "<div align='left'>[[item.name]
]</div>")
                .withProperty("name", Product::getName))
                .setHeader("Product Name");

I also need to right align a popup action menu, but had to create a component template to do this:

<link rel="import" href="../../bower_components/polymer/polymer.html">

<dom-module id="action-menu-template">
    <template>
        <style>
            // See: https://www.w3schools.com/howto/howto_css_dropdown.asp
            /* The container <div> - needed to position the dropdown content */
            .dropdown {
                float: right;
                right: 0px;
                display: inline-block;
            }

            .hoverTarget {
                display: block;
            }

            /* Dropdown Content (Hidden by Default) */
            .popupActions {
                display: none;
            }

            /* Show the dropdown menu on hover */
            .dropdown:hover .popupActions {
                display: block;
            }

            /* Hide the target menu on hover */
            .dropdown:hover .hoverTarget {
                display: none;
            }
        </style>

        <div align="right" class="dropdown">
            <span class="popupActions">
                <vaadin-button theme="small tertiary">
                    <iron-icon icon="vaadin:edit" slot="prefix"></iron-icon>
                </vaadin-button>
                <vaadin-button theme="small tertiary">
                    <iron-icon icon="vaadin:trash" slot="prefix"></iron-icon>
                </vaadin-button>
            </span>
            <span class="hoverTarget">
                <vaadin-button theme="small tertiary">
                    <iron-icon icon="vaadin:vaadin:ellipsis-circle-o"></iron-icon>
                </vaadin-button>
            </span>
        </div>
    </template>

    <script>
        class ActionMenuTemplate extends Polymer.Element {
            static get is() {
                return 'action-menu-template';
            }

            static get properties() {
                return {
                    // Declare your properties here.
                };
            }
        }
        customElements.define(ActionMenuTemplate.is, ActionMenuTemplate);
    </script>
</dom-module>

@Tag("action-menu-template")
@HtmlImport("src/components/action-menu-template.html")
public class ActionMenuTemplate extends PolymerTemplate<ActionMenuTemplate.ActionMenuTemplateModel> {

    /**
     * Creates a new ActionMenuTemplate.
     */
    public ActionMenuTemplate() {
        // You can initialise any data required for the connected UI components here.
    }

    /**
     * This model binds properties between ActionMenuTemplate and action-menu-template.html
     */
    public interface ActionMenuTemplateModel extends TemplateModel {
        // Add setters and getters for template properties here.
    }
}

And add it to the grid:

        grid.addColumn(new ComponentRenderer<>(item -> {
            return new ActionMenuTemplate();
        })).setHeader("Actions");
4

Franz Schoning,
Thank you for solution - i have to set alignment to right. Do you know how to do the some for header? Because table now looks litter silly.
Thank you
Regards,
Matic

5 
yourGrid.getColumn("columnName").setStyleGenerator(item -> "v-align-center");

CSS Style:

.v-align-center {
	text-align: center;
}