Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
vaadin grid columns.headerContent does not override name attribute
is setting the header content still supported? Here is how i am setting and name is always in the header
this.$.grid.addColumn(
{
name: columnDef.metadataKey.fieldName,
sortable: true,
headerContent: "Something other than name"
}
);
also tried
'this.$.grid.columns[index].headerContent = "SOMETHING OTHER THAN NAME";'
Hi Jason.
The header API was changed in 1.0.0-beta1: https://github.com/vaadin/vaadin-grid/releases/tag/1.0.0-beta1
cool thx, its still in the new API documentation here https://cdn.vaadin.com/vaadin-core-elements/latest/vaadin-grid/ for the column object
Well that’s embarrasing… thanks for pointing it out!
I removed it from master. I’ll ask someone to update the online docs also.
Docs at https://cdn.vaadin.com/vaadin-core-elements/latest/vaadin-grid/ are now also updated accordingly. (might take a few hours for the caches to update)
hi, all!
thank
This post has saved my life :)
if you need past my code in angular 2
for (var col in this._columns) {
this.el.nativeElement.addColumn({ name: this._columns[col] });
this.el.nativeElement.columns[col].sortable = true;
if (this._columns[col] === 'novelty') {
// Add a renderer for the picture column
this.el.nativeElement.columns[col].renderer = function(cell) {
// PUBLISHED
if (cell.data === true) {
cell.element.innerHTML = '<div style="background-color: green; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; border: 2px solid; width: 25px; height: 25px;"></div>';
}
// UNPUBLISHED
else{
cell.element.innerHTML = '<div style="background-color: darkred; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; border: 2px solid; width: 25px; height: 25px;"></div>';
}
}
}
this.el.nativeElement.header.getCell(0, col).content = this._translate.instant('contents.grid.' + this._columns[col]);
}