How can I disable column auto-width feature in Clarity Datagrid? - datagrid

Question

I need to dynamically build the columns of a Clarity Datagrid in Angular. This is how I do it:
I have an array columnsDef that holds the definition of the fields I need to show, like this:
columnsDef = [
{id:'id', label:'ID'},
{id:'client', label:'Client/Prospect'},
...
]
and another variable backlog that holds the actual data to show in the grid.
then, in my html template, I have the following code to define the columns headers and cells:
<clr-datagrid>
<clr-dg-column *ngFor="let def of columnsDef" [clrDgField]="def.id">
{{ def.label }}
</clr-dg-column>
<clr-dg-row *clrDgItems="let request of backlog" [clrDgItem]="request">
<clr-dg-cell *ngFor="let def of columnsDef">
{{ request[def.id] }}
</clr-dg-cell>
</clr-dg-row>
</clr-datagrid>
This actually "works" but the column alignment is all messed up. The values aren't below their headers and the cells width are different from row to row.
(Sorry I had to pixelize some confidential data)
How can I fix this?

Answer 1

Dynamic columns don't get calculated widths because of the nature of the lifecycle, the contents aren't rendered in time to know what the size is so they get a default width. If you put a [style.width.px]="100" binding on each column it will easily select that size by default instead.
Another option that I'd recommend is defining all of the columns and then dynamically hiding the ones you don't want. That means the table is fully known to the Datagrid and calculations should be better.
<clr-dg-column>
<ng-container *clrDgHideableColumn="{hidden: isColumnHidden}">
Column Name
</ng-container>
</clr-dg-column>
Some cases this might not make sense (as in sometimes columns are not meant to be available at all). In those cases I generally recommend to just define a different Datagrid for each case instead of trying to always have a dynamically built one. It makes it more explicit and declarative what the Datagrid is, and will render more cleanly.