@Jordan Are you still having this issue? I solved mine by adding 'sticky-top' to the tag.

    <tr>
        <th *ngFor="let head of headElements; let i = index" scope="col"
                    class="sticky-top bg-white"
                        ..........

Dear @Jordan

I looked at your code, and i think the header does not remain static when scrolling the page when parent div of table has table-responsive class.

In your example you have:

 <div class="row">
          <div class="col-12">
            <div class="table-responsive">
              <table #requestNonProdSupportGroupTable="mdbEditor"
                     (rowHighlight)="requestNonProdSupportGroupHighlightedRow = $event"
                     [itemsPerPage]="visibleItems"
                     class="table table-hover"
                     ......

Try get rid of this table-responsive class.

We will take a closer look at this problem. Please let me know if your problem disappears after removing this class.

Hope it helps!

Best Regards, Bartosz.

Dear @Jordan

Your example seems to work as it should (tested in a ng new app):

<table
  class="table table-hover table-hr-data-row"
  mdbTableEditor
  mdbTable
  stickyHeader="true"
  stickyHeaderBgColor="#303030"
  stickyHeaderTextColor="#ffffff"
>
  <thead>
    <tr>
      <th *ngFor="let head of headElements; let i = index" scope="col">
        {{ head }}
      </th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let el of elements">
      <th scope="row">{{ el.id }}</th>
      <td>{{ el.first }}</td>
      <td>{{ el.last }}</td>
      <td>{{ el.handle }}</td>
    </tr>
  </tbody>
</table>

TS

  elements: any = [
    { id: 1, first: 'Mark', last: 'Otto', handle: '@mdo' },
    { id: 2, first: 'Jacob', last: 'Thornton', handle: '@fat' },
    { id: 3, first: 'Larry', last: 'the Bird', handle: '@twitter' },
    ....

  ];



  headElements = ['ID', 'First', 'Last', 'Handle'];

as you mentioned - maybe there are any interference from other sticky content on the page. Could you send some demo app with existing problem on my email - b.termena@mdbootstrap.com ?

Best Regards, Bartosz.

<table #fieldSelectionTable="mdbEditor"
                   (rowHighlight)="fieldSelectionHighlightedRow = $event"
                   [itemsPerPage]="visibleItems"
                   class="table table-hover table-hr-data-row"
                   mdbTableEditor

                   mdbTable
                   stickyHeader="true"
                   stickyHeaderBgColor="#303030"
                   stickyHeaderTextColor="#ffffff">

              <thead>
                <tr>
                  <th *ngFor="let head of fieldSelectionHeadElements; let i = index"
                      scope="col">
                    {{head}}
                  </th>
                </tr>
              </thead>
              <tbody *ngIf="(requestFieldSelectionFinishedLoading | async)">
                <tr #tableRow
                    *ngFor="let item of fieldSelectionTable.performSearch(''); let i = index">
                  <td [ngClass]="{'tr-selected-row-highlight': item.isRequested}">{{item.dataEntityDescription}} </td>
                  <td [ngClass]="{'tr-selected-row-highlight': item.isRequested}">{{item.fieldDescription}} </td>
                  <td [ngClass]="{'tr-selected-row-highlight': item.isRequested}">
                    <mdb-checkbox (change)="updateIsRequested(item.fieldId,$event)"
                                  [value]="item.isRequested"
                                  class="form-control">
                    </mdb-checkbox>
                  </td>
                  <td [ngClass]="{'tr-selected-row-highlight': item.isRequested}">
                    <mdb-checkbox (change)="updateIsStoredInApp(item.fieldId,$event)"
                                  [value]="item.isStoredInApp"
                                  class="form-control">
                    </mdb-checkbox>
                  </td>
                  <td [ngClass]="{'tr-selected-row-highlight': item.isRequested}">
                    <mdb-checkbox (change)="updateIsFedToOtherApp(item.fieldId,$event)"
                                  [value]="item.isFedToOtherApp"
                                  class="form-control">
                    </mdb-checkbox>
                  </td>
                  <td [ngClass]="{'tr-selected-row-highlight': item.isRequested}">
                    <mdb-checkbox (change)="updateIsFedToThirdParty(item.fieldId,$event)"
                                  [value]="item.isFedToThirdParty"
                                  class="form-control">
                    </mdb-checkbox>
                  </td>
                  <td [ngClass]="{'tr-selected-row-highlight': item.isRequested}">{{item.refDataType.dataType}} </td>
                  <td [ngClass]="{'tr-selected-row-highlight': item.isRequested}">{{item.refAccessSensitivity.accessSensitivity}} </td>
                </tr>
              </tbody>
            </table>

Is there an update on this?