Datagrid

Question

如何让 datagrid 组件的行详细信息占据网格中可用 space 的整个宽度？

我试过修改不同 css 类的 flex 和 width 属性，但我尝试过的似乎都不起作用。

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

很难说这是否是您问题的答案。您无需更改数据网格 css 即可让内容占据一整行。可扩展行可用于占据整行的内容或每列占据 space 的内容。

这是一个实施了可扩展行的插件，因此您可以将整行内容与每列内容交换。

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>

Datagrid - 行详细信息全宽

Datagrid - Row Details Full Width

vmware-clarity