Datagrid rows are malformed when we change columns and rows.

[vundev]

Describe the bug

We have a datagrid for which rows and columns are set trough pipes. Each pipe return different list of items based on a boolean filter. For columns we have ['x'] when the filter is enabled, when disabled - ['x', 'y'], for rows when the filter is enabled: [{x:...}, {x:...}], when disabled: [{x:..., y:...}, {x:..., y:...}]. When we change the filter twice we observe that rows does not fit column dimensions at the end.

How to reproduce

https://stackblitz.com/edit/clarity-light-theme-v5-ugpzvo?file=src/app/app.component.html

Steps to reproduce the behavior:

1. Click twice Update rows and columns button

Expected behavior

Expects columns and rows to be properly aligned.

Versions

Clarity version:

• [ ] v12.x
• [ ] v13.x
• [x] Other: v5

Framework:

• [x] Angular
• [ ] React
• [ ] Vue
• [ ] Other:

Framework version:

Angular 11

Device:

• MacBook pro
• MacOs Monterey
• Chrome
• 96.0.4664.93

[kevinbuhmann]

Similar issue in old repo: vmware/clarity#5485

The clr-datagrid does not currently support dynamic columns.

[kevinbuhmann]

Also, @clr/angular@v5 is no longer supported. Any fix for this issue will not land in 5.x.

[kevinbuhmann]

I can confirm this is still a bug in v16: https://stackblitz.com/edit/clarity-dark-theme-clr16-ayxrjf