ngx-datatable prevent whitespace

Question

How to prevent ngx-datatable to have white space on end when resize. It work's when i remove [scrollbarH]="true", but i need scrollbar because table is to big for small screens. There is my html code.

<ngx-datatable style="width:95%; margin: 0 auto;"
  class="material"
  [rows]="areas"
  [columnMode]="'force'"
  [headerHeight]="50"
  [rowHeight]="50"
  [scrollbarH]="false"
  [selectAllRowsOnPage]="false"
  (activate)="onActivate($event)">

     <ngx-datatable-column name="Id" [maxWidth]="60"></ngx-datatable-column>
     <ngx-datatable-column name="Name"></ngx-datatable-column >
     <ngx-datatable-column name="Actions"></ngx-datatable-column>
</ngx-datatable>

score 0 · Answer 1 · answered Sep 13 '19 at 08:41

One of the ways is to wrap the table in a div, use min-width and max-width on this div. And the property [scrollbarH] should be assigned to some value. Either read the screen width and adjust it, or you can use column count , or maybe even both and adjust it.

<div style="float:left; max-width: 90%; min-width: 30%">
  <ngx-datatable
   style="width: 90%"
   [scrollbarH] = SOME VARIABLE, WHICH YOU ADJUST 
  >
</ngx-datatable>
  </div>

ngx-datatable prevent whitespace

1 Answers1