Fixed header

[samyomar]

the ability to add fixed header will be very good

[christianacca]

Maybe this can be achieved using just css?

A quick look on SO:

• http://stackoverflow.com/questions/21168521/scrollable-table-with-fixed-header-in-bootstrap
• http://jsfiddle.net/T9Bhm/7/

[c-eliasson]

@christianacca For vertical scrolling, it would be an easy fix with CSS using overflow-y: auto; on the tbody. For horizontal scrolling on the other hand, is it a whole different story.

For horizontal scrolling, you cannot do it with pure CSS, from what I know. The problem is that the columns in the thead would not scroll along with the columns in tbody. To solve that, I've seen some jQuery plugins that brake the table into two separate tables, one containing the thead and one containing tbody and then they scroll both tables simultaneously using javascript.

[RohitUdayTalwalkar]

@c-eliasson - I'm having some trouble with your suggestion, the table headers are still scrolling even with that style applied to the body. Any chance you've got an example I can look at?

[c-eliasson]

@RohitUdayTalwalkar You would probably have to set display: block; on the tbody as well.

Example

[RohitUdayTalwalkar]

@c-eliasson https://github.com/c-eliasson
Great, that works!
The width doesn't match the header but I think I can write a directive to
get that working.

Thanks for the quick response!

-Rohit

On Mon, Mar 9, 2015 at 1:46 PM, Christofer Eliasson <
notifications@github.com> wrote:

@RohitUdayTalwalkar https://github.com/RohitUdayTalwalkar You would
probably have to set display: block; on the tbody as well.

Example https://jsfiddle.net/6wsds9rn/

—
Reply to this email directly or view it on GitHub
#524 (comment).

[anthony-o]

One can be inspired by this SO question and perhaps by one of those github projects:

• https://github.com/alalonde/angular-scrollable-table
• The excellent but complex https://github.com/ceolter/ag-grid
• https://github.com/cornflourblue/angu-fixed-header-table
  • or this fork which seems to be more active: https://github.com/eyeview-opensource/angu-fixed-header-table
• https://github.com/oci-labs/FixedHeader

[theaspect]

See #41 (comment)