Vaadin Grid with dynamic columns

Hi, Is there any example I can refer for vaadin grid using LitElement and build the grid dynamically? Thanks

Hi Jaleel,

What are you trying to do with the grid? (I’m not sure what a Li(s)tElement is…


Hi Stuart, Thanks for replying. Let me try to explain. Usually when we create a grid we define columns in advance and bind the grid. But, in my case I do not know the number of columns in advance and I would know at the time of application started. An example would be, a grid where user can configure what all columns needed in the grid and at the time user logs in we get the configured columns from some persistent location (maybe a db) and build the columns dynamically and then bind the data. An example is here . This example uses Polymer.Element . But in my case, I use LitElement.

LitElemnt is a new way of writing web components in Polymer . More information here


Hi Jaleel,

I’m probably no help for you really. I do allow the my users to select which columns are shown at runtime, but I use the Java API. I init the grid with a bean type and then configure the columns based on a list of visible columns in the users settings.


Here’s an example of using vaadin-grid with LitElement, but without dynamic columns.!/vaadin-grid-renderer?path=app.js:1:0

I think you should be able to generate the dynamic vaadin-grid-column elements with LitElement in a similar way as you would with Polymer though. You would just generate the DOM in the render() method using some loop or Array mapping methods. See

If you need more help I can try to provide a working example later (probably some other day)

Thanks Stuart and Kari for the help. I will try as Kari suggested and let you know how it goes.

Ahm, vaadin-grid needs items object property, if you use lit-element like me

        <vaadin-grid-selection-column auto-select frozen></vaadin-grid-selection-column>
        <vaadin-grid-filter-column width="9em" path="codVehiculo" header="Vehiculo"></vaadin-grid-filter-column>
        <vaadin-grid-filter-column width="9em" path="codMarca" header="Marca de Vehiculo"></vaadin-grid-filter-column>
        <vaadin-grid-filter-column width="9em" path="codModelo" flex-grow="2" header="Modelo de Vehiculo"></vaadin-grid-filter-column>
        <vaadin-grid-filter-column width="9em" path="codTipo" header="Tipo de Vehiculo"></vaadin-grid-filter-column>
        <vaadin-grid-filter-column width="9em" path="placa" header="Placa de Vehiculo"></vaadin-grid-filter-column>
        <vaadin-grid-filter-column width="9em" path="codConfiguracion" header="Configuracion de Vehiculo"></vaadin-grid-filter-column>

you have to bind your data in the vaadin-grid, to do this dynamically you can map at least one object to get properties length
then the same way I map here:

this.vehiculos.length >2?
{length: Math.ceil(this.vehiculos.length/this.pageSize)})
.map((item,index)=>html`<button @click=${(e)=>this.updateItemsFromPage(}>${index+1}</button>`):"false"`

Lit-Element is powerfull when you use highOrder Functions to render data