Ngx-datatable: when vertical scroll is true, row grouping will not work.

[gritman]

sorry my english is poor, i cannot fill the form out. pls dont del my issue.
my issue is:
when vertical scroll is true, row grouping will not work.
i think it's a bug, and hope you support this feature, it's very useful
i attach a JPG, pls check

[CunhaGus]

@gritman I've just checked and it is a bug. For now are you able to use it without scrolling? just estimate how many groups you want to display and the grid will adjust it's size as needed.

What is your mother language?

[sparkyrr]

Running in to this issue as well. Trying to get row details with row grouping to work. Need vertical scroll so the row details will show correctly but it messes up the row grouping.

[racpa]

yep, it also doesn't work with horizontal virtual scroll properly

[wizarrc]

This is what the datatable should be able to do. It's a bit of extra work to virtualize it. As you can see my fork is still a bit sluggish after adding row grouping. I hope to be able to speed that up.

[racpa]

@wizarrc this is only on your fork?

[wizarrc]

@racpa yeah, it's some ideas I'm trying out

[racpa]

@wizarrc

Is it - PR: Resize observer component #1040?

Or something local? Mind if I take a peek or have some guidance?

[wizarrc]

Is it - PR: Resize observer component #1040?

@racpa no

right now it's local and too unstable for general usage. I plan to release my private clone (make public on github) once I iron out the bugs.

[LucaAndrei]

@wizarrc Any updates on this? Managed to make it work? Could we expect to have your work merged anytime soon?
Thanks,
Andrei

[jkesineni]

Hi, Did u get chance to post to repo the changes you have done

[ChanBen]

any updates?

[DevonteDC]

@wizarrc Can we get access to that fix you had for this, even if its too unstable for general use, it would help to at least see where you were going with it. Nothing has been done about the issue in almost a year :(

[dmaf87]

Hi All,

the easiest way is edit your custom css and add below:

.ngx-datatable .datatable-body {
  height: 300px !important; 
  overflow-y: scroll;
}

(change 300px to your desired height).
If you want to hide the scrollbars replace overflow-y: scroll; withoverflow: hidden;

Regards,
Fahmi

[ChanBen]

do you mean to do this without setting vertical scroll to true?
because in this case you give up the virtual scroll.
any other ideas that can include virtual scroll?

[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;
}

[bhondu]

Faced the same problem and was a bit surprised that the issue is two years old.
Is there any chance the issue will be fixed ever?

[DzCorps]

Faced the same problem and was a bit surprised that the issue is two years old.
Is there any chance the issue will be fixed ever?

In my case i'm using a row-grouping, you can have a vertical scroll like this !

HTML
<ngx-datatable #myTable style="overflow-y: scroll !important;" [style.max-width.px]="datatableMaxHeight" class="material fullscreen" [rows]="rows" [groupRowsBy]="'category'" [columnMode]="ColumnMode.force" [scrollbarH]="false" [headerHeight]="50" [footerHeight]="0" [rowHeight]="40" [groupExpansionDefault]="true" > <ngx-datatable/>
TS
@ViewChild('content') private content: any;
this.datatableMaxHeight = this.content.el.clientHeight;