Skip to content
This repository has been archived by the owner on Sep 21, 2022. It is now read-only.

Method for fixing the header and scrolling the rows #28

Open
richardtallent opened this issue Jan 13, 2015 · 5 comments
Open

Method for fixing the header and scrolling the rows #28

richardtallent opened this issue Jan 13, 2015 · 5 comments

Comments

@richardtallent
Copy link

I have a sortable-table as the bottom half of a vertical layout (below a core-splitter), and while I've been able to make the table scroll (rather than the entire vertical layout), the column headers of course scroll out of view.

#databaseListTable { overflow-y: scroll; }

<div vertical layout fit> <textarea id="query" style="width:100%;height:10em;"></textarea> <core-splitter direction="up" allowOverflow></core-splitter> <sortable-table class="bootstrap" checkbox multiSelect rowSelection disableColumnMove id="databaseListTable"> <sortable-column name="Name">Name</sortable-column> <sortable-column name="Title">Title</sortable-column> <sortable-column name="Result">Result</sortable-column> </sortable-table> </div>

I'm a polymer newbie, so maybe I'm missing an obvious solution, but the ideas that strike me so far (such as trying to scroll the tbody instead) aren't working.

@stevenrskelton
Copy link
Owner

Yes, tbody scrolling just isn't supported by browsers.

Some table libraries use divs for everything, so it's no extra work for them. The other table libraries that use table tags actually make 2 sets of thead column headers. One that stays frozen in place while you scroll and one that's hidden behind it and scrolls with the rows.

So there's no good solution at the moment. :(

@kplatter
Copy link

I have a working scrollable fork of sortable-table, that I have been working on. I will try and commit what I have tomorrow.

@kplatter
Copy link

I commited the changes that I have been working on, I know they are not complete and may not be the best, but seem to be generally working and show some promise.

@kplatter
Copy link

just attribute your table with scrollable and set your pageSize to the number of rows you want displayed, you can also set stretchH="last" to have the last column expand to the width of the table.

@richardtallent
Copy link
Author

Thanks! I'll give the fork a shot whenever I have a chance. This was one of the things I'd hoped had gotten better since the last time I tried to do something similar (I've been hiding out in ExtJS-land for a few years).

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants