Angular Sticky Table Header


Topic: Angular Sticky Table Header

Jordan asked 3 years ago

Are the API's for the MdbTableEditorDirective and MdbTableDirective compatible? I was attempting to utilize the bordered, hover, responsive, and stickyHeader inputs mentioned in the MdbTableDirective documentation on the MdbTableEditorDirective to no avail. I was thinking that it would have all the functionality of base MdbTableDirective and more.

Can/should I use them alongside each other?

If the inputs are unavailable for the MdbTableEditorDirective, could I manually add the classes they apply? If so, could I have an example?

Thanks! Jordan


Bartosz Termena staff answered 3 years ago

Dear @Jordan

Your stickyHeader is not visible when scrolling, because it is covered by your navigation bar.

You have two options here:

1) Remove fixed-top from navbar

2) Add some space between stickyHeader and fixed-top navbar

Hope it helps!

Best Regards, Bartosz.


Jordan commented 3 years ago

That does help. I was thinking it would recognize the other sticky content like with the sticky after input.


Jordan answered 3 years ago

Is there an update on this?


Damian Gemza staff commented 3 years ago

Dear @Jordan

Sorry for late response!

You can use mdbTable directive with mdbTableEditor without any problem.

The mdbTableEditor directive haven't got inputs from mdbTable, so you have to add this directive to use inputs like bordered, responsive, stickyHeader and other.

Best Regards,

Damian


Jordan commented 3 years ago

No worries. Even when I use the mdbTable directive with the stickyHeader input, the header does not remain static when scrolling the page.

Would there be any interference from other sticky content on the page? I am also using the sticky and stickyAfter directive on the page.


Arkadiusz Idzikowski staff commented 3 years ago

Could you paste here an example html/ts code so we can debug this problem on our end?


Jordan commented 3 years ago

Posted below.....


Jordan answered 3 years ago

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

Bartosz Termena staff answered 3 years ago

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'];

enter image description here

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.


Jordan commented 3 years ago

Email sent. Thanks!


Bartosz Termena staff commented 3 years ago

Hi! I haven't received your email. Could you send it again?

Best, Bartosz.


Jordan commented 3 years ago

Resent. Thanks!


Bartosz Termena staff commented 3 years ago

Hi,

Gmail blocks messages that may spread viruses, like messages that include executable files or certain links. Please send your demo app via google drive.

Best Regards, Bartosz.


Jordan commented 3 years ago

Resent with Google drive


Bartosz Termena staff answered 3 years ago

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.


Jordan commented 3 years ago

I already tried that; it didn't work.


osbeug001 answered 2 years ago

@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"
                        ..........

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 8.5.0
  • Device: PC
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No