ngx-datatable-row-detail width is fixed

[lewma]

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
I have a ngx-datatable with my columnMode set to 'force'
I also have my ngx-datatable-row-detail defined with [rowHeight]="'auto'"

Expected behavior
Overall, table works fine, I can expand row details and they initially display ok. However, if I drag the width of my browser window to be wider, the table columns and rows resize fine, however the row details remains at an inital fixed width.

How can I get my row details to be responsive in width like the rest of the table ?

Reproduction of the problem

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

I need my row details to have responsive content

Please tell us about your environment:

Windows 10, Chrome, Angular 5

• Table version: 11.2.0

• Angular version: 5.2.3

• Browser: Chrome Version 65.0.3325.181 (Official Build) (64-bit)

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

[gabrieltaets]

I'm having the same problem.

[utkuferuz]

I have the exact problem.

[gabrieltaets]

I have found a temporary solution to the problem. Implement the AfterContentChecked hook on the component, and just manipulate something in there that would force the datatable to redraw itself. I, for instance, just put the following code:
ngAfterContentChecked(){ this.columns = [...this.columns]; }
where columns is bound to the columns input of the datatable. Not the best solution probably, but it works for me.

[FrancescoBorzi]

Same problem here, it looks quite serious. Can anyone please have a look ? @marjan-georgiev @amcdnl

[inspirassion]

Same problem I can't get full-width

[arnoutwittebrood]

Same problem here. It's a serious problem indeed, please provide us with a proper solution. Thanks.

[sjardine]

Same problem here.

[irega]

We have fixed it using viewport units and some bootstrap classes. I have done a fiddle for you:

https://jsfiddle.net/ireinoso/23md50e1/

[anisabboud]

Adding this to my styles.scss mitigated the issue for me.

datatable-scroller {
    width: 100% !important;
}

[frankdavidcorona]

@anisabboud +1 thanks, work for me too.

[ArfanMirza]

Here is code snippet, which handle the dynamic width of expanded rows.
May be it is not best solutions, but it worked for me.

<div class="lightest-gray-bg table-wrapper" #tableWrapper>

  <ngx-datatable class="material expandable" #myTable class='table-striped' [columnMode]="'force'" [headerHeight]="40"
    [footerHeight]="45" ...>
<ngx-datatable-row-detail [rowHeight]="getRowHeight" (toggle)="onDetailToggle($event)">
      <ng-template let-row="row" let-expanded="expanded" ngx-datatable-row-detail-template>

        <div style="background-color: gray;width:100%; height: 100%;">
          <strong style="color : white;">test</strong>
        </div>
      </ng-template>
    </ngx-datatable-row-detail>
<ngx-datatable-column [width]="40" [resizeable]="false" [sortable]="false" [draggable]="false" [canAutoResize]="false">
      <ng-template class="xxxx" let-row="row" let-expanded="expanded" ngx-datatable-cell-template>
        <a class="fa" [class.fa-plus]="!expanded" [class.fa-minus]="expanded" (click)="toggleExpandRowC(row)" title="Expand/Collapse Row">
        </a>
      </ng-template>
    </ngx-datatable-column>
<ngx-datatable-column name="2nd Column">
      <ng-template let-row="row" ngx-datatable-cell-template>
      </ng-template>
    </ngx-datatable-column>
<ngx-datatable-column name="3rd Column">
      <ng-template let-row="row" ngx-datatable-cell-template>
      </ng-template>
    </ngx-datatable-column>
</ngx-datatable>
</div>

export class ComponentClassWhichHaveNgxDatatable extends FullScreenRoot implements OnInit {
private currentComponentWidth;
@ViewChild('myTable') table: any;
@ViewChild('tableWrapper') tableWrapper;
constructor(protected onFullScreenNotifier: OnFullScreenService,
    protected cdRef: ChangeDetectorRef,
    protected element: ElementRef) {

    super(element, onFullScreenNotifier, cdRef);
    this.addFullScreenSubscription();

  }
ngAfterViewChecked() {
    // console.log('ngAfterViewChecked',this.currentComponentWidth);
    if (this.table && this.table.recalculate && this.tableWrapper && this.tableWrapper.nativeElement && (this.tableWrapper.nativeElement.clientWidth !== this.currentComponentWidth)) {
      this.currentComponentWidth = this.tableWrapper.nativeElement.clientWidth;
      this.table.recalculate();
      $('.datatable-body-cell-label').click();
      this.cdRef.detectChanges();
      this.sendFullScreenEvent();
    }

  }
 ngOnDestroy() {
    super.ngOnDestroy();
    // unsubscribe to ensure no memory leaks
    if (this.cdRef) {
      this.cdRef.detach();
    }
  }
 toggleExpandRowC(row) {
    this.table.rowDetail.toggleExpandRow(row);
    this.sendFullScreenEvent();
  }
}

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';

@Injectable()
export class OnFullScreenService {

  public _subject = new Subject<object>();
  public event = this._subject.asObservable();

  public publish(info: onFullScreenEvent) {
    this._subject.next(info);
  }

}

export enum fullScreenEvent {
  Default = 1,
  FullScreen = 2
}

export class fullScreenDimension {
  width: number;
  height: number;
}

export interface onFullScreenEvent {
  event?: fullScreenEvent;
  data?: any;
  oldDimension?: fullScreenDimension,
  newDimension?: fullScreenDimension
}

Full Screen Root class

import { ElementRef, ViewChild, AfterViewInit, ChangeDetectorRef, OnDestroy } from '@angular/core';
import { Utils } from 'app/Utils';
import { fullScreenDimension, OnFullScreenService, onFullScreenEvent } from 'app/shared/cpadmin/fullScreen/on-full-screen.service';


export class FullScreenRoot implements AfterViewInit, OnDestroy {

  // @ViewChild('parentDiv') parentDiv: ElementRef;

  initialViewDimension: fullScreenDimension;
  viewWidth: any;
  maxTries: number = 15;
  reTryCounter: number = 0;
  isReAdjusting: boolean = false;


  constructor(protected elementRef: ElementRef,
    protected onFullScreenNotifier: OnFullScreenService,
    protected cdRef: ChangeDetectorRef) {
    super();
  }

  ngAfterViewInit() {
    // console.log("ngAfterViewInit", this.elementRef);
    if (this.elementRef) {
      this.initialViewDimension = {
        width: this.elementRef.nativeElement.firstChild.offsetWidth,
        height: this.elementRef.nativeElement.firstChild.offsetHeight,
      } as fullScreenDimension;
    }

    $(window).on("resize", this.resizeWindow);
  }

  resizeWindow = () => {
    // console.log("resize window");
    this.renderComponentDueToFullScreenEvent()
  }

  ngOnDestroy() {
    // console.log("ngOnDestroy:resize window");
    super.ngOnDestroy();
    if (this.cdRef) {
      this.cdRef.detach();
    }
    $(window).off("resize", this.resizeWindow);
  }

  addFullScreenSubscription() {
    this.addSubscriptionObject(this.onFullScreenNotifier.event.subscribe(
      (data: onFullScreenEvent) => {
        // console.log("onFullScreenEvent catch", data);
        this.reTryCounter = 0;
        this.renderComponentDueToFullScreenEvent(data);
      },
      error => {
        console.log("onFullScreenEvent catch", error);
      },
    )
    );
  }

  protected onRowExpand() {
    this.renderComponentDueToFullScreenEvent();
  }

  protected renderComponentDueToFullScreenEvent(data?: onFullScreenEvent) {
    // console.log("renderComponentDueToFullScreenEvent", $(".datatable-body-row"),this.isReAdjusting);
    if (this.isReAdjusting) {
      // console.log("already adjusting the window size", this.isReAdjusting);
      this.widthChangeDueToFullScreenEvent();//done only for Model, Model zoom size is not proper reflect on change width during responsive
      return;
    }
    this.isReAdjusting = true;
    this.triggerNgAfterViewChecked();
    //create dynamic class and add it inside style ==> header tags.
    if ($(".datatable-body-row").length > 0) {
      this.calculateAndAdjustRow();
    } else {
      // console.log('$(".datatable-body-row") not found', $(".datatable-body-row"));
      this.isReAdjusting = false;
    }
  }

  protected calculateAndAdjustRow() {
    // console.log("calculateAndAdjustRow");

    let w = $(".datatable-body-row").width();
    // console.log(this.viewWidth, ".datatable-body-row", w, ".datatable-row-detail", $(".datatable-row-detail").width());
    if (this.viewWidth && (this.viewWidth != w || $(".datatable-row-detail").width() != w)) { // cond_1
      // $(".datatable-row-detail").width(w);
      if ($('.datatable-row-detail').length > 0) {
        $(".datatable-row-detail").width(w);
        // $(".datatable-row-detail").css('background-color', 'blue !important');
      } else {
        let dataTableBodyRowCss = "width: " + w + "px;";
        // dataTableBodyRowCss += "background-color : green !important;";
        Utils.createCssClas('datatable-row-detail', dataTableBodyRowCss);
      }
      // console.log("new width set for 'datatable-row-detail'", w);
      this.widthChangeDueToFullScreenEvent(w);
      this.isReAdjusting = false;
    }
    else {
      if (this.reTryCounter <= this.maxTries) {
        let self = this;
        // this.triggerNgAfterViewChecked();
        setTimeout(() => {
          self.reTryCounter++;
          self.calculateAndAdjustRow();
        }, 200);
      }
      else {
        // console.log("no more need to check the detail row");
        this.isReAdjusting = false;
      }
    }
    this.viewWidth = w;
  }


  protected widthChangeDueToFullScreenEvent(newWidth?) {

  }

  triggerNgAfterViewChecked() {
    try {
      if (this.cdRef) {
        this.cdRef.detectChanges();
      }
    } catch (e) {
      // console.log('triggerNgAfterViewChecked', e);
    }
  }

  sendFullScreenEvent(data?: onFullScreenEvent) {
    if (!data) {
      data = {} as onFullScreenEvent;
    }
    else if (this.elementRef) {
      data.oldDimension = this.initialViewDimension;
      data.newDimension = {
        width: this.elementRef.nativeElement.firstChild.offsetWidth,
        height: this.elementRef.nativeElement.firstChild.offsetHeight,
      } as fullScreenDimension;
    }
    this.onFullScreenNotifier.publish(data);
  }

}

[abierbaum]

I am seeing the same issue with the latest release still. Is the workaround above still the best way to go or is there something else that can be fixed up?

[shubhamyugtia001]

here in 2020 we did not get any solutions yet...??

I have taken ngx datatable in another datatable to use in but the width of the table is not set with 100%
I have tried some techniques but didn't get the solutions

I have added button to navigate btwn two different rows
called api for data when add clicked
set the table by api data

but the table can not be set to 100%

[francojay]

yeah this is still not working, bogus

[cesarhfborges]

Hello could someone help me?

I'm using ngx-datatable and my table looks like this.
When resizing the window, the plugin corrects the width, or when the screen is small, the size is right, but on wide screens this happens,
I've tried scss, css, and the problem is that this progress bar has to be there.

[cesarhfborges]

I noticed that the table is always getting 17px wider than the space, but I still haven't been able to correct it.

[matthiasbrix]

I have the same issue and tried all solutions mentioned here, but without any luck. Please help me out if possible.

HTML:

<ngx-datatable
            #invoicesTable
            [rows]="rows"
            [columns]="column"
            [columnMode]="'force'"
            [footerHeight]="100"
            [headerHeight]="50"
            [messages]="this.messages"
            rowHeight="auto">
            <ngx-datatable-row-detail
              [rowHeight]="'auto'" #myDetailRow
              [template]="rowDetailsTemplate"
              (toggle)="onDetailToggle($event)">
            </ngx-datatable-row-detail>
            <ngx-datatable-footer>
              <ng-template
                ngx-datatable-footer-template
                let-rowCount="rowCount"
                let-pageSize="pageSize"
                let-selectedCount="selectedCount"
                let-curPage="curPage"
                let-offset="offset">
                <div>
                  <div class="d-flex expand-horizontal justify-content-between">
                    <div style="width: 50px;">Test</div>
                    <div>Test</div>
                    <div>Test</div>
                    <div>Test</div>
                    <div>Test</div>
                  </div>
                  <hr style="width:100%"/>
                  <div>rowCount: {{rowCount}}
                    | pageSize: {{pageSize}}
                    | curPage: {{curPage || 0}}</div>
                </div>
              </ng-template>
            </ngx-datatable-footer>
          </ngx-datatable>

CSS:

:host ::ng-deep ngx-datatable {
  .datatable-scroller {
    width: 100% !important;
  }
  .datatable-scroll {
    width: 100% !important;
  }
}

Result:

But I would prefer to have it spread across the whole row. Any ideas how to solve?

[nelsonBlack]

I have the same issue and tried all solutions mentioned here, but without any luck. Please help me out if possible.

HTML:

<ngx-datatable
            #invoicesTable
            [rows]="rows"
            [columns]="column"
            [columnMode]="'force'"
            [footerHeight]="100"
            [headerHeight]="50"
            [messages]="this.messages"
            rowHeight="auto">
            <ngx-datatable-row-detail
              [rowHeight]="'auto'" #myDetailRow
              [template]="rowDetailsTemplate"
              (toggle)="onDetailToggle($event)">
            </ngx-datatable-row-detail>
            <ngx-datatable-footer>
              <ng-template
                ngx-datatable-footer-template
                let-rowCount="rowCount"
                let-pageSize="pageSize"
                let-selectedCount="selectedCount"
                let-curPage="curPage"
                let-offset="offset">
                <div>
                  <div class="d-flex expand-horizontal justify-content-between">
                    <div style="width: 50px;">Test</div>
                    <div>Test</div>
                    <div>Test</div>
                    <div>Test</div>
                    <div>Test</div>
                  </div>
                  <hr style="width:100%"/>
                  <div>rowCount: {{rowCount}}
                    | pageSize: {{pageSize}}
                    | curPage: {{curPage || 0}}</div>
                </div>
              </ng-template>
            </ngx-datatable-footer>
          </ngx-datatable>

CSS:

:host ::ng-deep ngx-datatable {
  .datatable-scroller {
    width: 100% !important;
  }
  .datatable-scroll {
    width: 100% !important;
  }
}

Result:

But I would prefer to have it spread across the whole row. Any ideas how to solve?

:host ::ng-deep .ngx-datatable .datatable-body .datatable-scroll {
  display: inherit;
}

[KokalaBhanusri]

I use ngx datatable in multiple components of my application. this is solved by adding below scss

@media only screen and (min-width: 1351px) {
.datatable-body-row {
width: 1375px !important;
}

.ngx-datatable.bootstrap .datatable-body,
.ngx-datatable.bootstrap .datatable-header {
width: 1375px !important;
}

.ngx-datatable .datatable-header-inner,
.ngx-datatable .datatable-row-center {
width: 100% !important;
}
}

you need add styles according to your view port widths. for each table I added this. This is just a work around . For responsiveness you can add widths in media quries

update:

adding below fixed everything for me(mobile desktop and laptop) : I have this style to my component. remove ng deep and add to global style sheet.

::ng-deep
.ngx-datatable.fixed-header
.datatable-header
.datatable-header-inner {
width: 100% !important;
min-width: 1350px !important;
max-width: 100% !important;
}

::ng-deep .ngx-datatable.fixed-row .datatable-body-row {
width: 100% !important;
}
::ng-deep .ngx-datatable .datatable-row-center,
.ngx-datatable .datatable-row-group,
.ngx-datatable .datatable-row-left,
.ngx-datatable .datatable-row-right {
width: 100% !important;
}

::ng-deep .ngx-datatable.bootstrap .datatable-body,
::ng-deep .ngx-datatable.bootstrap .datatable-header {
datatable-body-row {
width: 100% !important;
min-width: 1350px !important;
max-width: 100% !important;
}
}

[manjeetyadv]

923 - Check out my solution for this too.

[KentOCS]

@KokalaBhanusri your solution worked, thank you.

[div661]

This worked for me

ngAfterViewChecked() { window.dispatchEvent(new Event('resize')) }