Data table doesn't shrink when window is resized

[mcblum]

I'm submitting a ... (check one with "x")

[ x ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior
When rendering the datatable in a view and not absolutely positioned, the initial width is set and making the window larger triggers a resize, but shrinking it does not.

Expected behavior
It would re-render the width for enlarging and shrinking window.

Reproduction of the problem
I'll try to get a plunker up but it's entirely possible that there something else causing this that is specific to my app.

What is the motivation / use case for changing the behavior?

Please tell us about your environment:
Mac, Chrome latest, Webstorm

• Table version: 0.8.x
  Latest

• Angular version: 2.0.x
  4.4

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
  Chrome

• Language: [all | TypeScript X.X | ES6/7 | ES5]

[unstephenk]

I am having this issue as well. The table should be responsive.

[Schles]

I had a similar issue, but in conjunction with flexbox and the datatable scrollbars.

Not sure if its relevant, but my problem was the fixed child width of the datatable.

The ngx-datatable calculates a fixed width based on the available space of the parent element (i.e 100% of flexbox, lets say 1000px wide window) and applies an width attribute to the tablewrapper (width:1000px). But the flexbox wraps its content and therefore always includes its child elements (the tablewrapper)

As soon as I increased the window size, the flexbox grew (100% windowsize, i.e. 1200px) and table wrapper recalculates its available space to 1200px, but as I decreased the window size, the flexbox kept its larger width (to wrap the table wrapper) and therefore it didnt forced the shrink on the datatable.

I hot fixed it by adding an arbitrary width to the flexbox (for example width:1px, which gets overridden by the flexbox attributes) and the flexbox shrank accordingly, which let the datatable recalculate its available space accordingly.

[sandrose48]

I am having same issue. adding arbitrary width didn't help

[kuhlschrank]

Same issue here.

[HunterMitchell]

Literally spent 45 minutes trying to figure this out. I am using flexbox and while adding arbitrary width did help out, I would hopefully like to see a fix soon.

[JanLoebel]

Having the same problem, can anybody help me out with some code-example?

[KadeHels]

I found that adding .datatable-row-detail { width: 100vw; } to a css file like main.css fixed the issue!

[vipulpal94]

I am having the same issue with ngx data table. When I expand my browser window, the columns seem to stretch fine, but when I make the browser window smaller, the columns don't spring back with the window. I have been fixing it for more than 2 days now. Any methods to get a work around? Or maybe I am better off with a different data table component?

[mali208]

getting save issue when i collapsed and expand my sidebar menu. width should be shrink and stretch

[sudha1981]

Invoke the below method on sidebar minimizer

(click)="WindowResize($event)"

WindowResize(e) {
setTimeout(() => { window.dispatchEvent(new Event('resize')); }, 250);
}

[mrkarp]

.datatable-row-detail { width: 100vw; }

After 2 hours of trying, this is what did it! Thank you!

[juedizor]

.datatable-row-detail { width: 100vw; }

After 2 hours of trying, this is what did it! Thank you!

I think that, this solution is very, very very heavy to apply in development, if you have differents component where you use the table, the performance about your app can see slow.

[Tecmesh]

I Think i solved the hard way. Just add these Lines in your CSS Rules :

.datatable-header {
    min-width: 100%;
}

.datatable-body {
    min-width: 100%;
}

This will keep the header and body of the table on a good shape. I recommend to wrap the datatable on a div using the .table-responsive class from bootstrap. it will work better for responsive.

[UsmanMajied17]

I found the solution to the issue.

Just use rxjs delay operator in ngOnit to call ngx-datatable's recalculate function.

I implemented this on a button click so when that toggle button is clicked i emit a val ( can be anything) from my navService and subscribe to it in the component in which you are using the datatable. Use the snippet below in ngOnit.

this.navService.testingSubject.pipe(delay(500)).subscribe((val) => {
this.table.recalculate();
});

Thanks

[yesimd]

Hi,

My ngx-datatable doesn't shrink and columns go out of the window when enlarge the browser window. I tried all methods described above. None worked. Because it is told resizing issue fixed, I updated datatable to its last version . But it didn't work as well. Do you have any other idea about how to solve this problem? Thanks.

[alexandis]

Hi,

My ngx-datatable doesn't shrink and columns go out of the window when enlarge the browser window. I tried all methods described above. None worked. Because it is told resizing issue fixed, I updated datatable to its last version . But it didn't work as well. Do you have any other idea about how to solve this problem? Thanks.

Seems like no one is going to fix this. I've updated 3rd party framework, which switched from their old grid to this one. I was excited about this. But now I can see a monster-markup-grid (look at source code in DevTools :) ) with pretty poor customization and ignored issues...

[alexandis]

.datatable-row-detail { width: 100vw; }

Does not help..

[rathodrajnesh]

I have resolved it by adding overflow: auto; at parent div.

[lrochaoliveira]

Hi folks!

I need some help! I'm using a ngx-datatable 19.0.0, Angular version 11.1.0 and Material version 11.2.13.

When I using props [columnMode]="'force'" directly in ngx-datatable, the page load correctelly and the columns fill the screen correctly. But if I resize the page anyway, the column does not fit and if I maximize the screen or return to the size the screen was initially and the column does not fit the page.

If I use props [columnMode]="'standard'" the size remains unchanged at any page size, but it does not fill the entire page, which is how [columnMode]="'force'" does correctly.

I applied all solucions in this issue and any works to me. Bellow there is a print the page with the defect:

I'll appreciate any helps!

[alexandis]

@lrochaoliveira I don't remember how I resolved the issue eventually and we don't use this component anymore. But I have some old code, please have a look - maybe it will help you or push to the right decision (I know, that it still looks like a workaround, but...)

import { ViewportRuler } from '@angular/cdk/overlay';
import { AfterViewInit, Directive, ElementRef, Host, Input, OnDestroy, Self } from '@angular/core';
import { DatatableComponent } from '@swimlane/ngx-datatable';
import { filter } from 'rxjs/operators';

@Directive({ selector: '[customObserver]' })
export class AbxCustomObserverDirective implements AfterViewInit, OnDestroy {
  @Input()
  observingElement: Element;

  // private initialWindowWidth: number = window.innerWidth;

  private previousClass: string;

  private changes: MutationObserver;

  constructor(
    private elementRef: ElementRef,
    @Host() @Self() private tableComponent: DatatableComponent,
    private readonly viewportRuler: ViewportRuler
  ) {}

  private forceTableWidthRecalc(): void {
    const tableElement = this.elementRef.nativeElement as HTMLElement;
    tableElement.style.removeProperty('width');
    // const zoomRatio = this.initialWindowWidth / window.innerWidth;
    this.tableComponent.recalculate();
    tableElement.style.width = `${tableElement.offsetWidth}px`;
  }

  ngAfterViewInit(): void {
    this.changes = new MutationObserver((mutations: MutationRecord[]) => {
      mutations.forEach((mutation: MutationRecord) => {
        const triggeringElement = mutation.target as HTMLElement;
        if (!this.previousClass || this.previousClass !== triggeringElement.className) {
          this.previousClass = triggeringElement.className;
          this.forceTableWidthRecalc();
        }
      });
    });

    this.changes.observe(this.observingElement, { attributes: true });

    this.viewportRuler.change(200).pipe(filter(event => event.type === 'resize')).subscribe((event: Event) => {
      this.forceTableWidthRecalc();
    });
  }

  ngOnDestroy(): void {
    this.changes.disconnect();
  }
}

[lrochaoliveira]

Thanks, @alexandis ! I'm newbie in angular. How can I use this solution in my code?

[alexandis]

Thanks, @alexandis ! I'm newbie in angular. How can I use this solution in my code?

You need to add this directive to your table component, i.e. add customObserver to the table's tag. Also you need to add AbxCustomObserverDirective to the declaration part of your component where you use the table...
Afterwards the best way to check what's going on is "Developer Tools" in the browser, debugging those methods :-)

P.S. If you still have difficulties with that - I might create some minimal test project at my side (or even better - a sandbox), try this code and share the link with you. Let me know if you prefer this way.

[lrochaoliveira]

Thanks, @alexandis ! I'm newbie in angular. How can I use this solution in my code?

You need to add this directive to your table component, i.e. add customObserver to the table's tag. Also you need to add AbxCustomObserverDirective to the declaration part of your component where you use the table... Afterwards the best way to check what's going on is "Developer Tools" in the browser, debugging those methods :-)

P.S. If you still have difficulties with that - I might create some minimal test project at my side (or even better - a sandbox), try this code and share the link with you. Let me know if you prefer this way.

@alexandis , if you could create some minimal test project at my side, I would be grateful!

[alexandis]

@lrochaoliveira ok - i will try to do that today later on.

[alexandis]

@lrochaoliveira please have a look. At least at my side this test grid resizes normally. But you might have a more complex scenario, in this case this code needs to be adjusted. I even don't remember the details and it was done for some old version of Swimlane Datatable, plus I had a newer Angular than you.... Maybe the code needs to be retrofitted now.
Anway, let me know if this at least works for you "as is" ;)

[lrochaoliveira]

@lrochaoliveira please have a look. At least at my side this test grid resizes normally. But you might have a more complex scenario, in this case this code needs to be adjusted. I even don't remember the details and it was done for some old version of Swimlane Datatable, plus I had a newer Angular than you.... Maybe the code needs to be retrofitted now. Anway, let me know if this at least works for you "as is" ;)

Hi @alexandis ! Thanks a lot for your reply. It was awesome what you did! It worked partially to us. So we decided change this component to material table.

[alexandis]

@lrochaoliveira glad to hear that the code was of some use. You might want to consume a mutation observer in future for some your UI needs, it's really a powerful thing. BTW - we've eventually switched to a material table-based component too :) So I might share my experience with you if you have any problems there.

[lrochaoliveira]

@lrochaoliveira glad to hear that the code was of some use. You might want to consume a mutation observer in future for some your UI needs, it's really a powerful thing. BTW - we've eventually switched to a material table-based component too :) So I might share my experience with you if you have any problems there.

Thanks @alexandis ! I"ll let you know.