need auto row height, vertical scroll, virtualization not required

I’m submitting a … (check one with “x”)

[ ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[x] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior

Scenario 1: auto row heights, text wrapping within cells, but absolutely no scrolling vertically Scenario 2: fixed row heights, scrolling vertically (with or without virtualization) Expected behavior

d

I just need to have auto row heights with text wrapping, and able to scroll to the rows beyond whats visible in the screen. What am I missing here XD. I don’t need scroll virtualization as I’m going to reduce the rows per page server side to a smaller amount…

Reproduction of the problem

set row height to auto. set scrollBarV to true. set virtualization to false. poof error saying cannot use auto row height with scrollBarV true.

What is the motivation / use case for changing the behavior?

some datatables have lots of columns, and some of those columns have very long values that need text wrapping to see all of the data instead of cutting it off. and these tables have more rows than fits on the visible screen, so we need to scroll down. Please tell us about your environment:

Windows 8, 10, atom, npm, iis, angular 5 ui, c# webapi

• Table version: 0.8.x

Yes, check

• Angular version: 2.0.x

5.x.x check

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

ALL

• Language: [all | TypeScript X.X | ES6/7 | ES5] all

[bleuscyther]

@collindutter in the .scss file of the component displaying the table :

.ngx-datatable{
  overflow-y: visible;
}

It does not work with any configuration here is what i have i don’ t remember exactly when it stopped working, but i think if you use some configurations the table content will not show:

 <ngx-datatable
            #trTable
            class="expandable"
            [rows]="rows"
            [scrollbarH]="true"
            [columns]="columns_default"
            [columnMode]="'force'"
            [headerHeight]="50"
            [footerHeight]="50"
            [rowHeight]="'auto'"
            [limit]="10">

                 <ngx-datatable-footer>
                     ...
                </ngx-datatable-footer>

                 <!-- Row Detail Template -->
                <ngx-datatable-row-detail [rowHeight]="'auto'" #myDetailRow (toggle)="onDetailToggle($event)">
                     <ng-template let-row="row" let-expanded="expanded" ngx-datatable-row-detail-template>
                        ...
                    </ng-template>
                </ngx-datatable-row-detail>
</ngx-datatable>

I hopr this helps

[mail2venkat]

Seems some of the styles are missing, Try This

HTML

<ngx-datatable class=“material” [columnMode]=“‘flex’” [headerHeight]=“50” [footerHeight]=“50” [scrollbarV]=“true” [rows]=“rows”> <ngx-datatable-column name=“Name” [flexGrow]=“1”> <ng-template let-value="value" ngx-datatable-cell-template> {{value}} </ng-template> </ngx-datatable-column> <ngx-datatable-column name=“Gender” [flexGrow]=“1”> <ng-template let-row="row" let-value="value" ngx-datatable-cell-template> {{value}} </ng-template> </ngx-datatable-column> <ngx-datatable-column name=“company” [flexGrow]=“1”> <ng-template let-value="value" ngx-datatable-cell-template> {{value}} </ng-template> </ngx-datatable-column> </ngx-datatable>

CSS

.ngx-datatable.scroll-vertical .datatable-body { overflow-y: auto; } .ngx-datatable.scroll-vertical { height: 70vh; }