Reply To: How to force column headers to wrap

[aconley]

I’ve been playing with this more, and I think I found a solution. A combination of CSS to wrap text and center the column header vertically, and handling the onColumnResize event to set the header row height. I updated the Stackblitz, but the important parts are below. I was able to get the headers to resize when the grid first loads with that onReady handler, but for some reason it doesn’t work in the Stackblitz.
CSS

smart-grid-column {
  height: 100% !important;
  line-height: normal !important;
}
smart-grid-column .smart-label {
  white-space: normal !important;
  word-break: break-word;
  display:inline-flex !important;
  align-items: center;
}
smart-grid-column .smart-label.align-right {
  flex-direction: row-reverse;
}

Typescript

ngAfterViewInit(): void {
  ...other stuff here...
  this.subscriptions.push(this.grid.onColumnResize.subscribe(() => this.resizeColumnHeaders()));
  this.subscriptions.push(this.grid.onReady.subscribe(() => this.resizeColumnHeaders()));
}
private resizeColumnHeaders() {
  const header = this.grid.nativeElement.querySelector('.smart-grid-column-header') as HTMLElement;
  if (header) {
    // Since column header cells are centered vertically, the 8 here just gives some padding
    header.style.height = (this.getMaxHeaderHeight() + 8) + 'px';
  }
}
private getMaxHeaderHeight(): number {
  const headerNodes = this.grid.nativeElement.querySelectorAll('smart-grid-column .smart-label span');
  const heights: number[] = [];
  headerNodes.forEach(headerNode => heights.push(headerNode.clientHeight));
  return Math.max(...heights);
}