angular how to resize ngx-datatable while closing and opening nav bar

Question

Before clicking on the on the navbar the <ngx-datatable> looks like this

And after clicking on the navbar it looks like this

As you see in the second picture the navbar columun did not resize after clicking.

Here is the code

<ngx-datatable
  #table
  class="material"
  [rows]="data"
  [loadingIndicator]="loadingIndicator"
  columnMode="force"
  [headerHeight]="60"
  [footerHeight]="80"
  rowHeight="auto"
  [limit]="10"
  [scrollbarH]="scrollBarHorizontal"
  [reorderable]="reorderable"
  [selected]="selected"
  [selectionType]="'checkbox'"
  (select)="onSelect($event)"
>

I looked for help but but couldn't find the solution. Thank you.

Answer 1

You need to refresh the rows of the table every time you click on the side bar toggle.

In my use case, I needed to do the refresh after some amount of time along with ChangeDetectorRef to make it work. Here is a snippet of my code:

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

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.scss']
})
export class TestComponent implements OnInit {

  constructor(private changeDetector: ChangeDetectorRef) { }

  ngOnInit(): void {
    // ...
  }

  
  // Call this function every time you close or open your sidenav
  resizeTable() {
    setTimeout(() => {
      this.data = [...this.data];
      this.changeDetector.detectChanges();
    }, 500);
  }

}

Hopefully this helps!