fixed header and scrollable body in table in html angular

Topic: fixed header and scrollable body in table in html angular

Frederic priority asked 5 years ago

Hello,

I’m using « Table vertical scroll » to display data:

If the screen size gets smaller, an horizontal scroll bar shows automatically to allow the table to scroll:

Now I need to turn the « Table vertical scroll » into a table with a fixed header and with a body scrolling vertically.

I used html and the following css to get this output :

tbody {
  display: block;
  overflow: auto;
  height: 500px;
  width: 100%;
}

thead tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

thead, tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

thead {
  width: calc( 100% - 1em )
}

Screenshot 3

I have a problem : when the screen size gets smaller, none of the horizontal scroll bars appears and the table columns are too close.

Screenshot 4

How could I get a working table like pictures 1 and 2, with the same features, but with a fixed header?

Thanks

Add comment

Damian Gemza staff answered 5 years ago

0 0 Best answer

<p>Dear <a href="/profile/?id=45345" target="_blank" rel="nofollow">@Frederic</a></p>

<p>Okay, now I think that I get it.</p>

<p>Please take a look at the below code. What I have changed?</p>

<p>1) I have added <code>style="overflow: auto"</code> to the div which is parent for the whole table element,</p>

<p>2) I have added <code>.table-responsive</code> class to the table element,</p>

<p>3) I have set the fixed <code>td</code> width with css</p>

<div class="modal-header">
    <p class="heading lead">List</p>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="hide()">
      <span aria-hidden="true" class="white-text">&times;</span>
    </button>
  </div>

<thead>
        <tr>
          <th class="text-center">
            <mdb-checkbox [checked]="itemsAllChecked" (change)="onChkAll($event)"></mdb-checkbox>
          </th>
          <th *ngFor="let header of headers" class="align-middle">{{header}}</th>
        </tr>
        </thead>

<tbody>
        <tr *ngFor="let item of listInfo; let id = index; let rowEven = even" [class.card-header]="rowEven">
          <td class="text-center">
            <mdb-checkbox [id]="item.id" [checked]="item.check" (change)="onChkChange($event)"></mdb-checkbox>
          </td>
          <td class="align-middle">{{item.name}}</td>
          <td class="align-middle">{{item.surname}}</td>
          <td class="align-middle">{{item.country}}</td>
          <td class="align-middle">{{item.city}}</td>
          <td class="align-middle">{{item.position}}</td>
          <td class="align-middle">{{item.age}}</td>
        </tr>
        </tbody>

</table>
    </div>
  </div>

</div>

<pre class="prettyprint"><code>tbody {
  display: block;
  overflow: auto;
  height: 500px;
  width: 100%;
}

thead tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

thead, tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

thead {
  width: calc(100% - 1em)
}

td {
  width: 70px;
}
</code></pre>

<p>Best Regards,</p>

<p>Damian</p>

Please insert min. 20 characters.

Dear @Frederic

Okay, now I think that I get it.

Please take a look at the below code. What I have changed?

1) I have added style="overflow: auto" to the div which is parent for the whole table element,

2) I have added .table-responsive class to the table element,

3) I have set the fixed td width with css

.html:

<div mdbModal #formTestModal="mdbModal" class="modal fade top mt-3" style="overflow-y: auto" id="listTestModalTop" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true" [config]="{ignoreBackdropClick: true, keyboard: false}">

  <div class="modal-header">
    <p class="heading lead">List</p>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="hide()">
      <span aria-hidden="true" class="white-text">&times;</span>
    </button>
  </div>

  <div class="modal-body">

    <div style="overflow: auto;">
      <div class="float-center mb-1">
        <h3 class="card-header text-center font-weight-bold py-2">List</h3>
      </div>

      <table mdbTable mdbTableScroll scrollY="true" class="table table-striped text-center mb-5 table-responsive" bordered="true">

        <thead>
        <tr>
          <th class="text-center">
            <mdb-checkbox [checked]="itemsAllChecked" (change)="onChkAll($event)"></mdb-checkbox>
          </th>
          <th *ngFor="let header of headers" class="align-middle">{{header}}</th>
        </tr>
        </thead>

        <tbody>
        <tr *ngFor="let item of listInfo; let id = index; let rowEven = even" [class.card-header]="rowEven">
          <td class="text-center">
            <mdb-checkbox [id]="item.id" [checked]="item.check" (change)="onChkChange($event)"></mdb-checkbox>
          </td>
          <td class="align-middle">{{item.name}}</td>
          <td class="align-middle">{{item.surname}}</td>
          <td class="align-middle">{{item.country}}</td>
          <td class="align-middle">{{item.city}}</td>
          <td class="align-middle">{{item.position}}</td>
          <td class="align-middle">{{item.age}}</td>
        </tr>
        </tbody>

      </table>
    </div>
  </div>

</div>

<button mdbBtn color="primary" (click)="show()">Show</button>

.scss:

tbody {
  display: block;
  overflow: auto;
  height: 500px;
  width: 100%;
}

thead tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

thead, tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

thead {
  width: calc(100% - 1em)
}

td {
  width: 70px;
}

Best Regards,

Damian

Add comment

Frederic priority answered 5 years ago

0 0 Best answer

Dear @Damian,

It works well.

Thanks.

Add comment

Frederic priority answered 5 years ago

0 0 Best answer

<p>Dear <a href="/profile/?id=29824" target="_blank" rel="nofollow">@Damian Gemza</a>    </p>

<p>here is the full code of the component:</p>

<p><strong>list-test.component.html</strong></p>

<pre class="prettyprint"><code>  <div class="modal-header">
    <p class="heading lead">List</p>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="hide()">
      <span aria-hidden="true" class="white-text">&times;</span>
    </button>
  </div>

<thead>
          <tr>
            <th class="text-center">
              <mdb-checkbox [checked]="itemsAllChecked" (change)="onChkAll($event)"></mdb-checkbox>
            </th>
            <th *ngFor="let header of headers" class="align-middle">{{header}}</th>
          </tr>
        </thead>

<tbody>
          <tr *ngFor="let item of listInfo; let id = index; let rowEven = even" [class.card-header]="rowEven">
            <td class="text-center">
              <mdb-checkbox [id]="item.id" [checked]="item.check" (change)="onChkChange($event)"></mdb-checkbox>
            </td>
            <td class="align-middle">{{item.name}}</td>
            <td class="align-middle">{{item.surname}}</td>
            <td class="align-middle">{{item.country}}</td>
            <td class="align-middle">{{item.city}}</td>
            <td class="align-middle">{{item.position}}</td>
            <td class="align-middle">{{item.age}}</td>
          </tr>
        </tbody>

</table>
    </div>

</div>

</div>
</code></pre>

<p><strong>list-test.component.ts</strong></p>

<pre class="prettyprint"><code>import { Component, OnInit, ViewChild } from '@angular/core';
</code></pre>

<p>import { ModalDirective, MdbCheckboxChange } from 'ng-uikit-pro-standard';</p>

<p>@Component({
  selector: 'app-list-test',
  templateUrl: './list-test.component.html',
  styleUrls: ['./list-test.component.css']
})
export class ListTestComponent implements OnInit {
  @ViewChild('formTestModal') formListTestModal: ModalDirective;</p>

<p>public headers: Array = new Array("Name", "Surname", "Country", "City", "Position", "Age");
  public listInfo: Array = new Array();</p>

<p>constructor() {
    this.listInfo = [
      { id: 1, check: false, name: "Kate", surname: "Moss", country: "USA", city: "New York City", position: "Web Designer", age: 23 },
      { id: 2, check: false, name: "Anna", surname: "Wintour", country: "United Kingdom", city: "London", position: "Frontend Developer", age: 36 },
      { id: 3, check: false, name: "Tom", surname: "Bond", country: "Spain", city: "Madrid", position: "Photographer", age: 25 },
      { id: 4, check: false, name: "Jerry", surname: "Horwitz", country: "Italy", city: "Bari", position: "Editor-in-chief", age: 41 },
      { id: 5, check: false, name: "Janis", surname: "Joplin", country: "Poland", city: "Warsaw", position: "Video Maker", age: 39 },
      { id: 6, check: false, name: "Gary", surname: "Winogrand", country: "Germany", city: "Berlin", position: "Photographer", age: 37 },
      { id: 7, check: false, name: "Angie", surname: "Smith", country: "USA", city: "San Francisco", position: "Teacher", age: 52 },
      { id: 8, check: false, name: "John", surname: "Mattis", country: "France", city: "Paris", position: "Actor", age: 28 },
      { id: 9, check: false, name: "Otto", surname: "Morris", country: "Germany", city: "Munich", position: "Singer", age: 35 },
      { id: 10, check: false, name: "Kate junior", surname: "Moss", country: "USA", city: "New York City", position: "Web Designer", age: 13 },
      { id: 11, check: false, name: "Anna junior", surname: "Wintour", country: "United Kingdom", city: "London", position: "Frontend Developer", age: 26 },
      { id: 12, check: false, name: "Tom junior", surname: "Bond", country: "Spain", city: "Madrid", position: "Photographer", age: 15 },
      { id: 13, check: false, name: "Jerry junior", surname: "Horwitz", country: "Italy", city: "Bari", position: "Editor-in-chief", age: 31 },
      { id: 14, check: false, name: "Janis junior", surname: "Joplin", country: "Poland", city: "Warsaw", position: "Video Maker", age: 29 },
      { id: 15, check: false, name: "Gary junior", surname: "Winogrand", country: "Germany", city: "Berlin", position: "Photographer", age: 27 },
      { id: 16, check: false, name: "Angie junior", surname: "Smith", country: "USA", city: "San Francisco", position: "Teacher", age: 42 },
      { id: 17, check: false, name: "John junior", surname: "Mattis", country: "France", city: "Paris", position: "Actor", age: 18 }
    ];
  }</p>

<p>ngOnInit() {
  }</p>

<p>public show() {
    this.formListTestModal.show();
  }</p>

<p>public hide() {
    this.formListTestModal.hide();
  }</p>

<p>get itemsAllChecked() {
    let bStatus: boolean = true;
    this.listInfo.forEach(i => bStatus = i.check && bStatus);
    return bStatus;
  }</p>

<p>public onChkAll(event: MdbCheckboxChange): void {
      this.listInfo.forEach(i => i.check = event.element.checked);
  }</p>

<p>public onChkChange(event: MdbCheckboxChange): void {
      this.listInfo[Number(event.element.id) - 1].check = event.element.checked;
  }
}</p>

<p>interface IListItem {
  id: number;
  check: boolean;
  name: string | null;
  surname: string | null;
  country: string | null;
  city: string | null;
  position: string | null;
  age: number | null;
}</p>

<p><strong>list-test.component.css</strong></p>

<p>tbody {
  display: block;
  overflow: auto;
  height: 500px;
  width: 100%;
}</p>

<p>thead tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}</p>

<p>thead, tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}</p>

<p>thead {
  width: calc( 100% - 1em )
}</p>

<p>Thanks</p>

Please insert min. 20 characters.

Dear @Damian Gemza

here is the full code of the component:

list-test.component.html

<div mdbModal #formTestModal="mdbModal" class="modal fade top mt-3" style="overflow-y: auto" id="listTestModalTop" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
 aria-hidden="true" [config]="{ignoreBackdropClick: true, keyboard: false}">

  <div class="modal-header">
    <p class="heading lead">List</p>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="hide()">
      <span aria-hidden="true" class="white-text">&times;</span>
    </button>
  </div>

  <div class="modal-body">

    <div>
      <div class="float-center mb-1">
        <h3 class="card-header text-center font-weight-bold py-2">List</h3>
      </div>

      <table mdbTable mdbTableScroll scrollY="true" class="table table-striped text-center vertical mb-5" bordered="true">

        <thead>
          <tr>
            <th class="text-center">
              <mdb-checkbox [checked]="itemsAllChecked" (change)="onChkAll($event)"></mdb-checkbox>
            </th>
            <th *ngFor="let header of headers" class="align-middle">{{header}}</th>
          </tr>
        </thead>

        <tbody>
          <tr *ngFor="let item of listInfo; let id = index; let rowEven = even" [class.card-header]="rowEven">
            <td class="text-center">
              <mdb-checkbox [id]="item.id" [checked]="item.check" (change)="onChkChange($event)"></mdb-checkbox>
            </td>
            <td class="align-middle">{{item.name}}</td>
            <td class="align-middle">{{item.surname}}</td>
            <td class="align-middle">{{item.country}}</td>
            <td class="align-middle">{{item.city}}</td>
            <td class="align-middle">{{item.position}}</td>
            <td class="align-middle">{{item.age}}</td>
          </tr>
        </tbody>

      </table>
    </div>

  </div>

</div>

list-test.component.ts

import { Component, OnInit, ViewChild } from '@angular/core';

import { ModalDirective, MdbCheckboxChange } from 'ng-uikit-pro-standard';

@Component({ selector: 'app-list-test', templateUrl: './list-test.component.html', styleUrls: ['./list-test.component.css'] }) export class ListTestComponent implements OnInit { @ViewChild('formTestModal') formListTestModal: ModalDirective;

public headers: Array = new Array("Name", "Surname", "Country", "City", "Position", "Age"); public listInfo: Array = new Array();

constructor() { this.listInfo = [ { id: 1, check: false, name: "Kate", surname: "Moss", country: "USA", city: "New York City", position: "Web Designer", age: 23 }, { id: 2, check: false, name: "Anna", surname: "Wintour", country: "United Kingdom", city: "London", position: "Frontend Developer", age: 36 }, { id: 3, check: false, name: "Tom", surname: "Bond", country: "Spain", city: "Madrid", position: "Photographer", age: 25 }, { id: 4, check: false, name: "Jerry", surname: "Horwitz", country: "Italy", city: "Bari", position: "Editor-in-chief", age: 41 }, { id: 5, check: false, name: "Janis", surname: "Joplin", country: "Poland", city: "Warsaw", position: "Video Maker", age: 39 }, { id: 6, check: false, name: "Gary", surname: "Winogrand", country: "Germany", city: "Berlin", position: "Photographer", age: 37 }, { id: 7, check: false, name: "Angie", surname: "Smith", country: "USA", city: "San Francisco", position: "Teacher", age: 52 }, { id: 8, check: false, name: "John", surname: "Mattis", country: "France", city: "Paris", position: "Actor", age: 28 }, { id: 9, check: false, name: "Otto", surname: "Morris", country: "Germany", city: "Munich", position: "Singer", age: 35 }, { id: 10, check: false, name: "Kate junior", surname: "Moss", country: "USA", city: "New York City", position: "Web Designer", age: 13 }, { id: 11, check: false, name: "Anna junior", surname: "Wintour", country: "United Kingdom", city: "London", position: "Frontend Developer", age: 26 }, { id: 12, check: false, name: "Tom junior", surname: "Bond", country: "Spain", city: "Madrid", position: "Photographer", age: 15 }, { id: 13, check: false, name: "Jerry junior", surname: "Horwitz", country: "Italy", city: "Bari", position: "Editor-in-chief", age: 31 }, { id: 14, check: false, name: "Janis junior", surname: "Joplin", country: "Poland", city: "Warsaw", position: "Video Maker", age: 29 }, { id: 15, check: false, name: "Gary junior", surname: "Winogrand", country: "Germany", city: "Berlin", position: "Photographer", age: 27 }, { id: 16, check: false, name: "Angie junior", surname: "Smith", country: "USA", city: "San Francisco", position: "Teacher", age: 42 }, { id: 17, check: false, name: "John junior", surname: "Mattis", country: "France", city: "Paris", position: "Actor", age: 18 } ]; }

ngOnInit() { }

public show() { this.formListTestModal.show(); }

public hide() { this.formListTestModal.hide(); }

get itemsAllChecked() { let bStatus: boolean = true; this.listInfo.forEach(i => bStatus = i.check && bStatus); return bStatus; }

public onChkAll(event: MdbCheckboxChange): void { this.listInfo.forEach(i => i.check = event.element.checked); }

public onChkChange(event: MdbCheckboxChange): void { this.listInfo[Number(event.element.id) - 1].check = event.element.checked; } }

interface IListItem { id: number; check: boolean; name: string | null; surname: string | null; country: string | null; city: string | null; position: string | null; age: number | null; }

list-test.component.css

tbody { display: block; overflow: auto; height: 500px; width: 100%; }

thead tr { display: table; width: 100%; table-layout: fixed; }

thead, tbody tr { display: table; width: 100%; table-layout: fixed; }

thead { width: calc( 100% - 1em ) }

Thanks

Add comment

Damian Gemza staff answered 5 years ago

0 0 Best answer

Dear @Frederic

Could you please provide me with the .ts code of your tables? I would like to get the full code when I need to debug your problem.

Best Regards,

Damian

Add comment

Frederic priority answered 5 years ago

0 0 Best answer

<p>HTML first table:</p>

<thead>
  <tr>
    <th class="text-center">
      <mdb-checkbox [checked]="itemsAllChecked" (change)="onChkAll($event)"></mdb-checkbox>
    </th>
    <th *ngFor="let header of headers" class="align-middle">{{header}}</th>
  </tr>
</thead>

<tbody>
  <tr *ngFor="let item of listInfo; let id = index; let rowEven = even" [class.card-header]="rowEven">
    <td class="text-center">
      <mdb-checkbox [id]="item.id" [checked]="item.check" (change)="onChkChange($event)"></mdb-checkbox>
    </td>
    <td class="align-middle">{{item.name}}</td>
    <td class="align-middle">{{item.surname}}</td>
    <td class="align-middle">{{item.country}}</td>
    <td class="align-middle">{{item.city}}</td>
    <td class="align-middle">{{item.position}}</td>
    <td class="align-middle">{{item.age}}</td>
  </tr>
</tbody>
</code></pre>

<p></p>

<p>HTML second Table:</p>

<thead>
  <tr>
    <th class="text-center">
      <mdb-checkbox [checked]="itemsAllChecked" (change)="onChkAll($event)"></mdb-checkbox>
    </th>
    <th *ngFor="let header of headers" class="align-middle">{{header}}</th>
  </tr>
</thead>

<tbody>
  <tr *ngFor="let item of listInfo; let id = index; let rowEven = even" [class.card-header]="rowEven">
    <td class="text-center">
      <mdb-checkbox [id]="item.id" [checked]="item.check" (change)="onChkChange($event)"></mdb-checkbox>
    </td>
    <td class="align-middle">{{item.name}}</td>
    <td class="align-middle">{{item.surname}}</td>
    <td class="align-middle">{{item.country}}</td>
    <td class="align-middle">{{item.city}}</td>
    <td class="align-middle">{{item.position}}</td>
    <td class="align-middle">{{item.age}}</td>
  </tr>
</tbody>
</code></pre>

<p></p>

Please insert min. 20 characters.

HTML first table:

<table mdbTable mdbTableScroll scrollY="true" maxHeight="500" class="table table-striped text-center vertical mb-5" bordered="true">

<thead>
  <tr>
    <th class="text-center">
      <mdb-checkbox [checked]="itemsAllChecked" (change)="onChkAll($event)"></mdb-checkbox>
    </th>
    <th *ngFor="let header of headers" class="align-middle">{{header}}</th>
  </tr>
</thead>

<tbody>
  <tr *ngFor="let item of listInfo; let id = index; let rowEven = even" [class.card-header]="rowEven">
    <td class="text-center">
      <mdb-checkbox [id]="item.id" [checked]="item.check" (change)="onChkChange($event)"></mdb-checkbox>
    </td>
    <td class="align-middle">{{item.name}}</td>
    <td class="align-middle">{{item.surname}}</td>
    <td class="align-middle">{{item.country}}</td>
    <td class="align-middle">{{item.city}}</td>
    <td class="align-middle">{{item.position}}</td>
    <td class="align-middle">{{item.age}}</td>
  </tr>
</tbody>

HTML second Table:

<table mdbTable mdbTableScroll scrollY="true" class="table table-striped text-center vertical mb-5" bordered="true">

<thead>
  <tr>
    <th class="text-center">
      <mdb-checkbox [checked]="itemsAllChecked" (change)="onChkAll($event)"></mdb-checkbox>
    </th>
    <th *ngFor="let header of headers" class="align-middle">{{header}}</th>
  </tr>
</thead>

<tbody>
  <tr *ngFor="let item of listInfo; let id = index; let rowEven = even" [class.card-header]="rowEven">
    <td class="text-center">
      <mdb-checkbox [id]="item.id" [checked]="item.check" (change)="onChkChange($event)"></mdb-checkbox>
    </td>
    <td class="align-middle">{{item.name}}</td>
    <td class="align-middle">{{item.surname}}</td>
    <td class="align-middle">{{item.country}}</td>
    <td class="align-middle">{{item.city}}</td>
    <td class="align-middle">{{item.position}}</td>
    <td class="align-middle">{{item.age}}</td>
  </tr>
</tbody>

Add comment

Closed

This topic is closed.

FREE CONSULTATION

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

Status

Closed

Specification of the issue

ForumUser: Priority
Premium support: Yes
Technology: MDB Angular
MDB Version: MDB5 2.3.0
Device: Computer and SmartPhone
Browser: Edge and Chrome
OS: Windows 10
Provided sample code: No
Provided link: Yes

Frederic

134Support score
10Questions 8Answers 0Snippets