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:

<table>
    <thead>
        ...
    </thead>
</table>
<table>
    <tbody class="div-table-body">
        ...
    </tbody>
</table>
        

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.

Example:

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

or

<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

Order #	All Statuses {{option.text}}	Date Placed	Total

10 25 50 75