Sticky Table Cell Offset Calculation Not Working in Custom Component

I am working on a custom Angular component for a table that utilizes sticky positioning for certain cells. My goal is to have the first column stick to the left of the table, and the subsequent sticky columns to adjust their position based on the widths of previous sibling cells.

Here is my ApUiTdComponent implementation:

import { CommonModule } from '@angular/common';
import { AfterViewInit, Component, ElementRef, HostBinding, Input, Renderer2 } from '@angular/core';

@Component({
selector: 'ui-td',
standalone: true,
templateUrl: './td.component.html',
styleUrls: ['./td.component.css'],
imports: [CommonModule],
})
export class ApUiTdComponent implements AfterViewInit {
@Input() public fixed: 'LEFT' | 'RIGHT' | null = null;
private _offsetLeft = 0;

constructor(
private el: ElementRef,
private renderer: Renderer2,
) {}

@HostBinding('style')
public get styleBindings(): { [key: string]: string | null } {
const baseStyles = {
position: this.fixed ? 'sticky' : null,
backgroundColor: 'white',
};

if (this.fixed === 'LEFT') {
return {
...baseStyles,
left: `${this._offsetLeft}px`,
boxShadow: '3px 0px 5px rgba(0, 0, 0, 0.1)',
};
} else if (this.fixed === 'RIGHT') {
return {
...baseStyles,
right: '0px',
boxShadow: '-3px 0px 5px rgba(0, 0, 0, 0.1)',
};
} else {
return {};
}
}

public ngAfterViewInit(): void {
this.calculateOffset();
}

private calculateOffset(): void {
if (this.fixed === 'LEFT') {
let offset = 0;
let sibling = this.el.nativeElement.previousElementSibling;

// Loop through all previous siblings
while (sibling) {
const siblingTag = sibling.tagName;
const siblingWidth = sibling.offsetWidth;
const siblingFixedAttr = sibling.getAttribute('fixed');

console.log({
siblingTag,
siblingWidth,
siblingFixedAttr,
});

if (siblingTag === 'UI-TD' && siblingFixedAttr === 'LEFT') {
offset += siblingWidth;
}

sibling = sibling.previousElementSibling;
}

this._offsetLeft = offset;
}
}
}


In my template, I am using the component like this:

@for (todo of (data$ | async)?.data; track $index) {
<ui-tr>
<ui-td
fixed="LEFT"
class="font-monospace oneline-ellipsis mw-175px"
[title]="todo.id"
>
{{ todo.id }}
</ui-td>
<ui-td [fixed]="'LEFT'" class="oneline-ellipsis mw-300px" [title]="todo.title">
{{ todo.title }}
</ui-td>
<ui-td class="font-monospace"> {{ todo.completed }} </ui-td>
</ui-tr>
}


The console output when I log the sibling information shows that the width of the first sticky cell is correctly calculated:

{
"siblingTag": "UI-TD",
"siblingWidth": 175,
"siblingFixedAttr": "LEFT",
"siblingTextContent": "text-content"
}


However, the second ui-td component also marked as fixed="LEFT" is not adjusting its position correctly and retains a left: 0px style, rather than receiving the calculated offset.

Why is the second ui-td component not receiving the correct offset? Is there a better approach to calculate the offsets for sticky table cells in Angular?

Continue reading...