Grid: Set dynamic header text

Andreas402 · September 3, 2019, 7:44am

I’m using the grid web component (within a class that extends from lit-element) and I want to set a dynamic header text, i.d. in this case a text translated by a function. But the header text stays always empty. What is the correct way to set a dynamic header


....
render() {
	return html`
		<vaadin-grid-column>
			<template class="header">
				<vaadin-grid-sorter path="name">${this.translate('date')}</vaadin-grid-sorter>
			</template>

			<template
				>[[item.date]
]</template
			>
		</vaadin-grid-column>
`;

Andreas402 · September 3, 2019, 9:25pm

Ok, I solved it myself… First, I had version 5.1.0 installed which does not support all the renderers… My fault, thought I had updated. After switching to 5.4.8 it worked fine.

Two (common) hints for my oblivious future me and other people that are starting out with web components:

when the API talks about “property” like “headRenderer” don’t forget the (tiny) dot “.headRenderer” (https://lit-element.polymer-project.org/guide/templates#bind-properties-to-child-elements)
bind “this” if you want to access methods from the enclosing class

 <vaadin-grid-column flex-grow="0"
	.headerRenderer="${this.header.bind(this)}"
	.renderer="${this.dateRenderer.bind(this)}"
	path="createTimestamp">
</vaadin-grid-column>

And an example for the renderer (just one way)

     header(root, column) {
        let path = column.getAttribute('path');
		// without binding "this" you cannot access "this.translate"
        let translation = this.translate(path);
        render(
            html`
                ${translation}
            `,
            root
        );
    }