1

I am working on jhipster 5.7.2 project with angular 7 and I am using angular datatables and it's responsive extension is working fine when I have static data, but when I use *ngFor directive in tag it doesn't collapse the column on resizing, just hides the column header but the column is still there. After I resize to small window size and size back to normal the orientation of the first table row gets distorted and doesn't get fixed until I reload the page.

P.S - Struggled a lot on finding a fix, and tried giving width=100% to the table but the issue still persists.

user-management-component.html

<div>
        <table datatable [dtOptions]="dtOptions" class="row-border hover" width="100%">
            <thead>
              <tr class="tr-bg">
                <th>ID</th>
                <th>Login</th>
                <!-- <th>Last name</th> -->
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let user of users; trackBy: trackIdentity">
                <td><span>{{user.id}}</span></td>
                <td><span>{{user.login}}</span></td>
                <!-- <td><span>Bar</span></td> -->
              </tr>
            </tbody>
          </table>
      </div>

Here is the ngOnInit() function where dtOptions are declared.

user-management-component.ts

ngOnInit() {

    this.dtOptions = {
        responsive: true
      };

    this.accountService.identity().then(account => {
        this.currentAccount = account;
        this.loadAll();
        this.registerChangeInUsers();
    });
}

Full size page table Full Size page table

Table After resizing the window enter image description here

Thanks in advance for the help!

Alvin Nguyen
  • 250
  • 4
  • 10
Aayush
  • 409
  • 4
  • 17

1 Answers1

0

I have a half answer to your question, the code below adjusts the table, im using it to readjust my tables on sidemenu open/close. Its a half answer because I dont know when should you call it. I hope It helps

datatableElement.dtInstance.then((dtInstance: DataTables.Api) => {         
    dtInstance.columns.adjust().draw();   
})
GaryB
  • 374
  • 1
  • 9