具有 flex 模式的 Ngx-datatable 响应行详细信息

Question

我的 ngx 数据表行详细信息有问题。一切似乎都运行良好，所有列和行都非常灵敏。当我打开行详细信息时，它们显示正常。但是，如果我更改浏览器的宽度，细节将不会随行和列缩放。它有一个初始固定宽度，基于页面第一次加载。我似乎无法改变它。有什么建议吗？

 <ngx-datatable
    #myTable
    class="material"
    [columnMode]="'flex'"
    [headerHeight]="50"
    [footerHeight]="50"
    [rowHeight]="'auto'"
    [rows]="details">
    <ngx-datatable-row-detail [rowHeight]="100" #myDetailRow (toggle)="onDetailToggle($event)" flex>
      <ng-template let-row="row" let-expanded="expanded" ngx-datatable-row-detail-template >
        <div style="padding-left:35px;">
          <div><strong>Address Address Address Address Address AddressAddressAddress Address Address Address Address Address</strong></div>
        </div>
      </ng-template>
    </ngx-datatable-row-detail>
    <ngx-datatable-column name="Name" [flexGrow]="1">
      <ng-template let-row="row" let-expanded="expanded" ngx-datatable-cell-template>
          <a
          [class.datatable-icon-right]="!expanded"
          [class.datatable-icon-down]="expanded"
          title="Expand/Collapse Row"
          (click)="toggleExpandRow(row)">aaa
        </a>
      </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column name="Name" [flexGrow]="1">
      <ng-template let-row="row" ngx-datatable-cell-template>
        testing 3
      </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column name="Gender" [flexGrow]="5">
      <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
        testing
      </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column name="Age" [flexGrow]="5">
      <ng-template let-row="row" ngx-datatable-cell-template>
        testingsecond
      </ng-template>
    </ngx-datatable-column>
  </ngx-datatable>

Answer 1

:host ::ng-deep .ngx-datatable .datatable-body .datatable-scroll {
  display: inherit;
}

在这种情况下有效

具有 flex 模式的 Ngx-datatable 响应行详细信息

Ngx-datatabel responsive row details with flex mode

css

ngx-datatable

angular