Replace specific expanded rows with detail in Clarity Datagrid

Question

I am using the Clarity Datagrid and am trying to use the feature mentioned here: https://vmware.github.io/clarity/documentation/datagrid/expandable-rows. I want to use the clrDgReplace Input to replace the row with the detail when the row is expanded but I want to do this only for a few rows (not all rows). How can I achieve this behavior?

Here is my datagrid code:

<clr-datagrid>
  <clr-dg-column>User ID</clr-dg-column>
  <clr-dg-column [clrDgField]="'name'">Name</clr-dg-column>

  <clr-dg-row *clrDgItems="let user of users" [clrDgItem]="user">
    <clr-dg-cell>{{user.id}}</clr-dg-cell>
    <clr-dg-cell>{{user.name}}</clr-dg-cell>

    <!-- Example using a wrapper component -->
    <!--<detail-wrapper *clrIfExpanded ngProjectAs="clr-dg-row-detail" class="datagrid-row-flex"></detail-wrapper>-->

    <clr-dg-row-detail *clrIfExpanded [clrDgReplace]="true">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in neque in ante placerat mattis id sed quam. Proin rhoncus lacus et tempor dignissim. Vivamus sem quam, pellentesque aliquet suscipit eget, pellentesque sed arcu. Vivamus in dui lectus. Suspendisse
          cursus est ac nisl imperdiet viverra. Aenean sagittis nibh lacus, in eleifend urna ultrices et. Mauris porttitor nisi nec velit pharetra porttitor. Vestibulum vulputate sollicitudin dolor ut tincidunt. Phasellus vitae blandit felis. Nullam
          posuere ipsum tincidunt velit pellentesque rhoncus. Morbi faucibus ut ipsum at malesuada. Nam vestibulum felis sit amet metus finibus hendrerit. Fusce faucibus odio eget ex vulputate rhoncus. Fusce nec aliquam leo, at suscipit diam.
    </clr-dg-row-detail>
  </clr-dg-row>


  <clr-dg-footer>{{users.length}} users</clr-dg-footer>
</clr-datagrid>

Here is the Plnkr replicating the issue: https://plnkr.co/edit/SSHfKApni8pWwXDEhuas?p=preview

Answer 1

You can add a replace property to your user object and set the ones you want to replace with detail to true and the others to false.

Note the user.replace propert on the clr-dg-row-deatil component in the app.component.ts file

<clr-dg-row-detail *clrIfExpanded [clrDgReplace]="user.replace">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit ...
</clr-dg-row-detail>

Here is a plunker with a working example of how to do this. https://plnkr.co/edit/r4Fr7NUWvqyubwLGbucJ?p=preview