ngx datatable vertical scroll with rowheight set to auto

Question

I am using ngx-datatable inside my Angular application. I was wondering if it is possible to use vertical scrolling together with automatic row height. This means that if the text insde a cell of the tabel, becomes to big, the length of the row will be expanded. This works perfect if setting the attribute [rowHeight]="'auto'". However, when using [scrollbarV]="true" the rowheight has to be a number because of the virtual scroll mechanisme used. Does anyone have a workaround to this?

<ngx-datatable
    style="height: 700px;"
    class="material"
    [columnMode]="'flex'"
    [headerHeight]="50"
    [footerHeight]="40"
    [rowHeight]="'auto'"
    [scrollbarH]="true"
    [scrollbarV]="true"
    [rows]="data">
    <ngx-datatable-column name="test" [flexGrow]="1" [minWidth]="120" [maxWidth]= "120">
      <ng-template let-row="row" ngx-datatable-cell-template>
        {{row}}
      </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column name="test" [flexGrow]="1" [minWidth]="80">
      <ng-template let-row="row" ngx-datatable-cell-template>
        {{row}}
      </ng-template>
    </ngx-datatable-column>
  </ngx-datatable>

There is an open issue on github, but the proposed solutions do no work. https://github.com/swimlane/ngx-datatable/issues/1292

score 5 · Answer 1 · answered Sep 21 '20 at 10:45

The answers above make the column headers scroll out of view when you scroll. Apply the scrolling to the table-body instead:

<ngx-datatable
    class="bootstrap material"
    columnMode="force"
    headerHeight="50"
    rowHeight="auto"
    >

::ng-deep .ngx-datatable .datatable-body {
    max-height: 300px !important;
    overflow: hidden auto;
}

score 4 · Answer 2 · answered Apr 02 '19 at 13:29

4

For future seekers:

<ngx-datatable
    class='bootstrap material'
    style="height: 600px; overflow-y:visible"
    [columnMode]="'force'"
    [headerHeight]="50"
    [footerHeight]="50"
    [rowHeight]="'auto'"
    [limit]="20" >

answered Apr 02 '19 at 13:29

Adriano

874
2
11
37

nice find! For the sake of simplicity, can be written `rowHeight="auto"` – Bogdan D Sep 29 '20 at 17:19
in fact for me it workerd only if `rowHeight="auto"`, not the `[rowHeight]="'auto'"` – Developer Marius Žilėnas Oct 29 '20 at 06:30

score 2 · Answer 3 · answered Jun 19 '19 at 18:19

2

For me the following is also working:

ngx-datatable {
  max-height: 70vh;
  overflow-y: scroll;
}

answered Jun 19 '19 at 18:19

Francesco Borzi

56,083
47
179
252

ngx datatable vertical scroll with rowheight set to auto

3 Answers3

Linked