Ngx-datatable: need auto row height, vertical scroll, virtualization not required

[markanthonyg]

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

[ArfanMirza]

any luck ?

[markanthonyg]

Yes. I was assuming this datatable would have an attribute to turn on vertical scrolling without anything to do with virtual scrolling but it doesn’t. In css I overrode datatable body and set overflow-y scroll. I did not add the attribute for scrollBarV and set row height to auto. I reduced the num rows to 100 to reduce the lag, mainly for ie users.

[bleuscyther]

@markanthonyg nice! i used overflow-y:visible for the rowDetail and its now working

[collindutter]

@bleuscyther could you elaborate a little more on what you did to fix this? I'm facing the same issue. Thanks!

[bleuscyther]

@collindutter in the .scss file of the component displaying the table :
scss .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:

```` html
#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>

````

I hopr this helps

[mail2venkat]

Seems some of the styles are missing, Try This

HTML

class="material"
[columnMode]="'flex'"
[headerHeight]="50"
[footerHeight]="50"
[scrollbarV]="true"
[rows]="rows">


{{value}}




{{value}}




{{value}}

CSS

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

[nguyendt214]

.datatable-row-center {
    display: table-cell;
 }

[joannepham2018]

I tried this

class="material"
[columnMode]="'flex'"
[headerHeight]="50"
[footerHeight]="50"
[scrollbarV]="true"
[rows]="rows">

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

But didn't see vertical scrolling bar. Any other suggestion

[webcat12345]

Maybe it's not in the scope of this issue, but I would like to ask, if it is possible to support rowHeight: auto and virtualScroll: true ?

I think it's not resolved yet on the angular forum, - https://github.com/angular/components/issues/10113
still an experimental feature