Using angular-material drag and drop inside ngx-datatable

Question

Im using ngx-datatable to render a table, inside of which I am using angular material cdk drag-n-drop. The overall functionality works well except when the list is long. If the table is scrolled to the bottom, and when I drag an item from the bottom to the top, the ngx-datatable doesn't scroll automatically. I think there is an issue with the two libraries not working well together, but anyone has any solutions to this?

<ngx-datatable
                    [ngStyle]="{ height: tableHeight }"
                    #invoicesTable
                    class="material bxt-table"
                    [rows]="rows"
                    [rowHeight]="40"
                    [scrollbarV]="true"
                    columnMode="flex"
                    cdkDropList
                    (cdkDropListDropped)="changeInvoiceOrder($event)"
                    [headerHeight]="50"
                    [footerHeight]="0"
                    [limit]="100">

What I've tried so far

• Add cdkScrollable to the ngx-datatable - Doesn't work
• Add cdkScrollable to the parent div - Doesn't work
• Add cdkScrollable to the parent div, give the parent div a height:500px and overflow:auto and then remove [scrollbarV] from the table - Functionally works but the scrollbar now appears on the parent and it looks odd.

Any pointers would be helpful.