Fix Header Table

Features enabled: sorting, filtering (using both in-grid and external controls), sync with browser URLs, pagination, items-per-page and fixed-header functionality. Angular UI Datepicker used for date controls, although you can use any other framework, plugin or styling. Project GitHub

How To Freeze Table Header

Using HTML Layout

The first option is to split table header and table body in two tables. One way to do this is to follow the next steps:

Code Sample:

    <tbody class="div-table-body">

Using Stand-alone Directive

Another option is to use the directive fixed-header that can be injected to the Data Grid like a separate module dataGridUtils.

To make it work it is needed to perform next steps:

The directive uses z-index: 99 if your page uses the same value or higher please make appropriate changes to fixed-header.scss file.

The directive also has additional attribute offset-from-element. It is needed if you already have some other elements with fixed position above the table. In this case you need to pass a class or id of the very last element (if there are several) to this attribute to make the directive take into consideration that header needs to be fixed with offset from above elements.


<table class="table" fixed-header offset-from-element=".the-class-on-above-fixed-element">
<table class="table" fixed-header offset-from-element="#the-id-on-above-fixed-element">

{{filtered.length}} items total
Order # Date Placed Total

See the Pen xZddZm by AngularDataGrid (@AngularDataGrid) on CodePen.