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!

4

1 回答 1

0

我对你的问题有一半的回答，下面的代码调整了表格，我用它来重新调整我在侧边菜单打开/关闭时的表格。它是一半的答案，因为我不知道你什么时候应该打电话给它。我希望它有帮助

datatableElement.dtInstance.then((dtInstance: DataTables.Api) => {         
    dtInstance.columns.adjust().draw();   
})
于 2019-02-21T16:37:45.687 回答