dynamic columns in Clarity version 3 Datagrid

[tshailesh-vmw]

I am trying to display columns based on user input and the column values are fetched through an API.
It works in clarity v0.10 but while migrating clarity to version 3 it is not working. Column data is present but it is not displayed.
sample code:

<clr-dg-column *ngFor="let column of columns">
    <ng-container *clrDgHideableColumn="{hidden: column.hide}">
        {column.value | titlecase}}
    </ng-container>
</clr-dg-column>

Column values are displayed in the hide/show popup in bottom left cornor.
Any solution on how to implement this using clarity3 datagrid?

update- columns are not visible only when row data is not present.

[Jinnie]

It would help to try a stackblitz reproduction:
https://stackblitz.com/edit/clarity-v3-light-theme
There may be some lifecycle racing condition, but without reproduction it's hard to debug it.

[Jinnie]

I just bumped into the same, researching another issue.
It is due to old (3.0 instead of 3.1.15) dependency in Stackblitz. We'll probably fix this later today. Until then, please, use this stackblitz: https://stackblitz.com/edit/clarity-v3-light-theme-latest?file=package.json

[tshailesh-vmw]

getting the same issue in both stackblitz.
https://stackblitz.com/edit/clarity-v3-light-theme-ucqlrw
https://stackblitz.com/edit/clarity-v3-light-theme-latest-xcctsk

[Jinnie]

For some reason it had the right package.json, but the real deps were still at 3.0. Here's an updated libs version of your code:
https://stackblitz.com/edit/clarity-v3-dyn-columns-issue?file=src/app/app.component.ts

[tshailesh-vmw]

I was able reproduce this issue in this:
https://stackblitz.com/edit/clarity-v3-dyn-columns-issue-zgipkv
please have a look. When data variable in not empty columns can be seen(uncomment data variable)
Both columns and row is getting fetched from API in my project.
The difference here is that in my project only columns are not visible but in this the whole header sections disappears.

[Jinnie]

I see, thanks for the reproduction.
This behavior is not expected, but in the same time, the datagrid has not been designed to support fully dynamic columns.
From our perspective, if a totally new structure of the datagrid arrives, this is in essence a new datagrid and there is no benefit in reusing the old one. The overhead in supporting dynamic structure is quite big, with increased plane of errors and support.
That's why our current suggestion is to create new datagrid once the new structure arrives. This can most easily be achived by setting a *ngIf on the datagrid itself, that monitors if data is available. Here's an example:
https://stackblitz.com/edit/clarity-v3-dyn-columns-issue-esyy9a?file=src%2Fapp%2Fapp.component.ts
I added a button, to better illustrate the initial state.
This may not be exactly what you are looking for, but this is the best and safest approach so far.
If you're regularly and automatically updating the structure (we've had such cases too), this may be a sign of underlying usability and accessibility problems, which will surface early or late.
Hope this helps.

[tshailesh-vmw]

Thank you for the suggestion. I will try to use this to solve the issue.

I have another issue related to this datagrid. the scenario is that api call used to fetch row data give 25 rows at a time. and next 25 for the next page and total number of rows is also present in this same api. when i use (clrDgRefresh)="nextPage($event)" to check the page change and make api call to fetch the next 25 rows in pagination section the buttons to next page disappears.

The expected behaviour for the pagination section to show page second and option to goto page 1 or 3.

Any suggestion or alternate way to capture page change behaviour??

to reproduce this issue in this stackblitz: https://stackblitz.com/edit/clarity-v3-dyn-columns-issue-vxy3wh?file=src%2Fapp%2Fapp.component.html

1. click on load new data
2. after data is loaded for the first page click on the next page arrow for 2nd page
3. wait for the settimeout and after 3 seconds options for next and previous page will disappears.

Let me know if you want me to start a new discussion on this.

[Jinnie]

You shouldn't use *clrDgItems with server-driven datagrid, but a simple *ngFor.
It should be stated somewhere in the documentation, but with a component as complex as the datagrid, is probably easy to miss.