Datagrid selection is now preserved when:
This feature can be used when a Datagrid row has additional data or details that can be shown when interacting with the row. It supports many options, including:
Here is an example of how to make a row expandable:
<clr-dg-row *clrDgItems="let user of users">
<clr-dg-cell>{{user.id}}</clr-dg-cell>
<clr-dg-cell>{{user.name}}</clr-dg-cell>
<clr-dg-row-detail *clrIfExpanded>
This user likes ducks.
</clr-dg-row-detail>
</clr-dg-row>
If you include the same amount of <clr-dg-cell>
elements in the row details as anywhere else in the datagrid, they will properly align
as a way to display details for each cell individually.
Details are only instantiated when the row becomes expanded, so they are naturally lazy loaded: just make any AJAX
call you need in the constructor or ngOnInit()
of the component you put inside the
*clrIfExpanded
structural directive.
To notify us that you want a spinner to be displayed while lazy loading, just include a
[clrLoading]="myLoadingBoolean"
anywhere inside the details or even the row itself.
As long as myLoadingBoolean
is true, a spinner will be displayed.