angular - How to force ngx-datatable to resize after Flex wrapper resizes?

Question

I'm using "ngx-datatable" inside my Angular10 app. The app is using flex to layout the usual header, sidebar and data area panels.

I have wrapped the ngx-datatable inside a div that has a flex layout. On opening the app web page, the wrapper div resizes correctly to take up all the available horizontal and vertical space, but the ngx-datatable does not resize to take up all the vertical available space, as shown below

.full-area-grid {
  height: 100% !important;
  width: 99% !important;
}

.eis-vbox {
  height: 100%;
  width: auto;
  box-sizing: border-box;
  display: flex;
  flex: auto;
  flex-direction: column;
  align-items: stretch;
  padding: 0px;
  margin: 0px;
}


<div id="simpleListWrapper" #wrapper class="eis-vbox" >

  <ngx-datatable #simpleListTable id="simpleList"
    class="material striped full-area-grid"
    [rows] = "rows$ | async"
    [columns]="columns"
    [sorts]="sorts"
    [scrollbarV]="true"
    [footerHeight]="50"
    [headerHeight]="50"
    [rowHeight]="40"
    selectionType="checkbox"
    [loadingIndicator]="isloading > 0"
    [scrollbarV]="true"
    [externalPaging]="true"
    [externalSorting]="true"
    [count]="totalRows$ | async"
    [offset]="pageNumber$ | async"
    (page)="setPage($event)"
    (sort)="onSort($event)"
    (select)="onSelect($event)"
  >
  </ngx-datatable>

</div>

Viewing how the web page is displayed, the final resize of the wrapper div takes place AFTER the table has rendered itself and fetched data.

I'm wondering is it possible to capture the resize event on the wrapper div and then somehow force a resize on the table?

Any suggestions?

question from:https://stackoverflow.com/questions/65874382/how-to-force-ngx-datatable-to-resize-after-flex-wrapper-resizes

Answer 1

Waitting for answers