search

mariuszfoltak / angular2-datatable

DataTable - Simple table component with sorting and pagination for Angular2
202 stars 182 forks source link

How to enable horizontal/vertical scrollbar for the table? #100

Open kvbhaskar7 opened 7 years ago

kvbhaskar7 commented 7 years ago

Could someone help on how to enable horizontal/vertical scrollbar for this angular2-datatable?

payneBrandon commented 7 years ago

We just have our table inside a div tag with style set to overflow-x: auto; overflow-y: auto;

CraigWarford commented 7 years ago

So that sort of works, @payneBrandon, but it also scrolls the paginator in the tfoot, which is really not functionally pleasing for wide tables. I would prefer if the paginator was outside the table entirely; it doesn't really belong in the tfoot (really for column summary information), but there does not appear to be a simple way to make that happen. I did try locking it with a position attribute, but it still doesn't look right with the scrollbar beneath the pager.

bluecaret commented 7 years ago

@CraigWarford did you ever figure out a good way to make this work?

CraigWarford commented 7 years ago

@bluecaret I did come up with a bit of a hack. On the td element in the tfoot, I used CSS to make it render outside the table area. It's not ideal, but it works okay: element.style { position: absolute; border: none; z-index: 10; display: block; min-width: 350px; top: 15px; } And of course, the parent has to have its position set to absolute as well.