Scrolling table with fixed headers about ng-table

[theaspect]

Whoever find this, use https://github.com/jmosbech/StickyTableHeaders works out of the box with this directive:

.directive "stickyHeader", ["$timeout", ($timeout)->
  restrict: 'A'
  link: (scope, element, attrs) ->
    $timeout(() -> $(element).stickyTableHeaders())
]

[esvit]

No, i don't know how do this and i haven't plan do this feature. It is not easy functionality

[rconrad]

+1, this functionality would make ngTables so incredible compared to ng-grid or others that try to do the same.

[jack-kerouac]

I am specifically looking for this feature. I found an (ugly) way to make it work with ng-grid. Angular-table supports it out of the box.
This would be a great feature, though I acknowledge that it is not easy.

[Diego81]

+1

[benn0r]

+1

[pursual]

+1

[lyon-liao]

+1

[jvanderbiest]

I've implemented this using a jquery plugin (https://github.com/jmosbech/StickyTableHeaders).

There is a plunkr here: http://plnkr.co/edit/KyilXo?p=preview

[wherpoelaert]

+1

[divramod]

+1

[terencevs]

+1

[gitnik]

+1

[lee-40square]

+1

[brunoosilva]

+1

+1

[andrewboni]

Definitely +1 on this

[arthur-kv]

+1

[anthony-o]

+1

[lindelleric]

+1

[dmoskovtsov]

+1

[schmidtl]

+1

[incadoi]

+1

[sagarbhosale91]

I'm using angular js ng-table to display some information. I would like to make the header of the ng-table fixed with scroll bar.Moreover I need to place one accordion just before the ng-table.

When I collapse the accordion my ng-table fixed header does not work properly. Please refer plunker I have created : http://plnkr.co/edit/FGjU46cCMuhIdyacffHl?p=preview

[RomainGx]

+1

[sagarbhosale91]

Resolved with accordain ... Demo 👍 http://plnkr.co/edit/D5XxfgH79bR2wVDhPlku?p=preview

[corbinolds]

The plugin works fine for keeping the header in place, but when resizing the page, the header retains the same width until the page is refreshed or the table is scrolled back to the top.

When looking at the accordion plunker, when i scroll down in the table and resize the page width, the header keeps the same size it had as when the page wasn't resized. http://plnkr.co/edit/FGjU46cCMuhIdyacffHl?p=preview

[devLaaziz]

+1

[lessu]

+1

[SmallDev]

+1

[chrispyliang]

here is an approach with pure css

tbody {
    max-height: 200px; 
    overflow-y: scroll;
    display: block;
}

thead, tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}