Datagrid rendering issue

[vzdendyak]

This is a bug report for the @clr Angular or UI versions of the design system.
For the web-component implementation of Clarity (@cds), visit vmware-clarity/core.

If you are a VMware employee or a contractor in VMware, please use our support space in Google Chat to raise Clarity issues.

Describe the bug

I'm encountering some performance issues with the datagrid component. Specifically, I've noticed the following problems:

• Column Width Jumps: During the rendering process, the column widths appear to "jump" or adjust noticeably.

Screen.Recording.2024-09-27.at.14.35.52.mov

How to reproduce

Here is the stackblitz link.

I generate data dynamically and use the setTimeout to imitate the data loading process. The issue happens when the data is loaded and initially displayed in the Datagrid. It's visible that the column width is incorrect and it takes some time to recalculate the column width and display the grid correctly.

Steps to reproduce the behavior:

1. Open the example
2. Look at the datagrid column width change

Sometimes it renders fast, so please try to refresh the page several times.

Expected behavior

The datagrid data initial render should be smooth as it was in the previous versions.

Versions

Clarity version:

• v17.3.0

Framework version:

• Angular 17
• Angular 18

Device:

• Type: [Laptop]
• OS: [MacOS, Windows]
• Browser [Chrome, Opera, Firefox] (IMPORTANT: I can't reproduce this on Safari)

Additional notes

This issues affects our application seriously and stops us from migration to Angular 18 and Clarity 17.3.0