Angular Data Grid — Fix Header Table

Fix Header Table

Features enabled: sorting, filtering, sync with browser URLs, pagination, item-per-page and fixed-header functionality. Out-of-box Angular Material layout and input controls used, along with Material Design Light default CSS for grid 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:

  • Use the next styles (with any fixed height) applied to table body container to make it scrollable:
    .div-table-body { height: 600px; overflow-x: auto; overflow-y: scroll; }
  • Make sure that th elements have the same padding as td elements have.
  • Use padding-right with the value of scroll bar width to make an offset for the table contains header.
  • Use width attribute for columns to sync widths.

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:

  • Include script to your application:
    <script src="bower_components/angular-data-grid/dist/dataGridUtils.min.js"></script>
  • Include css stylesheets to your application:
    <link rel="stylesheet" href="bower_components/angular-data-grid/css/fixedHeader/fixed-header.css">
  • Inject dataGridUtils dependency in your module:
    angular.module('myApp', ['dataGrid', 'dataGridUtils.fixedHeader'])
  • Apply the directive fixed-header to the grid table:
    <table class="table" fixed-header>

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”>

The directive subscribes on scroll event, but the event is not fired when directive is used inside <md-content>, so to make it work please use the directive outside the <md-content> container. For more information about this problem please review this issue.

Clear Dates
{{filtered.length}} items total
10 25 50 75
Order # All Statuses {{option.text}} Date Placed Total
10 25 50 75


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