Vaadin-grid, Updating columns after the grid loaded fails

Flow
1

I am trying to create a grid with configurable columns. The grid load the dynamic columns initially but if I try to update the property that changes the column order then the grid fails with error uncaught (in promise) TypeError: Cannot read property 'nodeType' of null.

columns property has the configurable columns and below is my template

${columns[0]

    ? html`
		<vaadin-grid-column-group resizable>
			<template class="header">
            <vaadin-grid-sorter
				path="${columns[0]

.Value.toLowerCase()}">
${columns[0]
.Header}


${this.getCustomTemplates(columns[0]
)}
`: html``}

The columns property will hold the configurable columns and the data is provided to the vaadin-grid using the .items=${_data}.

2

Hi. Please note that you should not use <template> from Polymer with lit-html.
We are planning to drop <template> in future when we re-build Grid with LitElement.

Please use renderer / headerRenderer to define columns content. Same applies to vaadin-grid-column-group.
Alternative way would be to use vaadin-grid-sort-column (if you need a sorter in a column, not in a group).