Datagrid - 行の詳細全幅

Question

データグリッドコンポーネントの行の詳細を取得して、グリッド内の空き領域の全幅を取得するにはどうすればよいですか？

さまざまなCSSクラスのフレックスと幅のプロパティを変更しようとしましたが、何も試したことがないようです。

https://plnkr.co/edit/Y7L3eGpYbzvd31HK0v2F?p=preview

<clr-datagrid> 
    <clr-dg-column clrDgField="firstname">First name</clr-dg-column> 
    <clr-dg-column clrDgField="lastname">Last name</clr-dg-column> 

    <clr-dg-row *clrDgItems="let user of users"> 
     <clr-dg-cell>{{user.firstname}}</clr-dg-cell> 
     <clr-dg-cell>{{user.lastname}}</clr-dg-cell> 

     <my-detail *clrIfExpanded ngProjectAs="clr-dg-row-detail"></my-detail> 
    </clr-dg-row> 

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

---

@Component({ 
selector: "my-detail", 
template: ` 
    <clr-dg-row-detail [clrDgReplace]="true"> 
     <div class="row"> 
      <div class="col-xs-2">Lorem Ipsum:</div> 
      <div class="col-xs-4">...</div> 
      <div class="col-xs-2">Lorem Ipsum:</div> 
      <div class="col-xs-4">...</div> 
     </div> 
    </clr-dg-row-detail> 
}) 

Answer 1

これはあなたの質問への答えであれば、そのハードと言っています。コンテンツが完全な行になるようにするには、DataGrid CSSを変更する必要はありません。展開可能な行は、行全体を占めるコンテンツまたは列ごとにスペースを占めるコンテンツで使用できます。

ここでは、列の内容ごとに完全な行の内容を入れ替えることができるように、展開可能な行が実装されたplunkがあります。

https://plnkr.co/edit/9cj1lE5B4dwpRSRcKXXX?p=preview

関連するHTMLは次のようになります。さらに調査では

<clr-datagrid> 
     <clr-dg-column>User ID</clr-dg-column> 
     <clr-dg-column>Name</clr-dg-column> 
     <clr-dg-column>Creation date</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> 
       <clr-dg-cell>{{user.creation | date}}</clr-dg-cell> 

       <!-- Example using a wrapper component --> 
       <clr-dg-row-detail *clrIfExpanded> 
       <ng-template [ngIf]="detail === 'default'"> 
        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. 
       </ng-template> 

       <ng-template [ngIf]="detail === 'cols'"> 
        <clr-dg-cell>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</clr-dg-cell> 
        <clr-dg-cell>Proin in neque in ante placerat mattis id sed quam.</clr-dg-cell> 
        <clr-dg-cell>Proin rhoncus lacus et tempor dignissim.</clr-dg-cell> 
        <clr-dg-cell>Vivamus sem quam, pellentesque aliquet suscipit eget, pellentesque sed arcu.</clr-dg-cell> 
        <clr-dg-cell>Vivamus in dui lectus. Suspendisse cursus est ac nisl imperdiet viverra.</clr-dg-cell> 
       </ng-template> 
       </clr-dg-row-detail> 
      </clr-dg-row> 

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