Issue when mixing row groups and horizontal scroll

[shinobiwarrior]

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

If you have row grouping and horizontal scrollbar enabled at the same time, it generates an infinite scrolling, adding blank space to the right.

Expected behavior

The table should scroll only the actual width

Reproduction of the problem

http://plnkr.co/edit/QpQthGIGIreYTZOH42Tn

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

I want to group the rows, and also be able to scroll horizontally

Please tell us about your environment:

Debian 8, VS Code, Angular CLI

• Table version: 10.3.0 on my pc, 11.1.3 on the plunkr

• Angular version: 4.2.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 62, Firefox 52

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

[unstephenk]

I am having this issue as well. @shinobiwarrior Were you able to solve this?

[shinobiwarrior]

Not yet, I'm still waiting for an answer here, and as I had a lot of work on my other projects, I couldn't spend time on this

[unstephenk]

ok. I am busy as well. I will leave it like this until I get a chance to look at it.

[pssubashps]

I am also facing this issue. any update on this ?

[shinobiwarrior]

Nothing on my side...

[chalecki]

Same here 😢

Not sure but problem could be in header.component.ts (also in body-row.component.ts):

 calcStylesByGroup(group: string): any {
    const widths = this._columnGroupWidths;
    const offsetX = this.offsetX;

    const styles = {
      width: `${widths[group]}px`
    };

    if (group === 'center') {
      translateXY(styles, offsetX * -1, 0);
    } else if (group === 'right') {
      const totalDiff = widths.total - this.innerWidth;
      const offset = totalDiff * -1;
      translateXY(styles, offset, 0);
    }

    return styles;
  }

I saw, that offsetX does not have limit value, e.g. totalDiff?

[ClleaR]

Same problem here

[baozakelka]

It not best solution but it work for me.

In component.html

.
.
.
  <ngx-datatable
    #myTable
    class="bootstrap expandable"
    [rows]="dataList"
    [groupRowsBy]="'group'"
    [rowHeight]="'auto'"
    [columns]="columns"
    [loadingIndicator]="loading"
    [scrollbarH]="true"
    [groupExpansionDefault]="false"
  >

   <ngx-datatable-group-header [rowHeight]="50" #myGroupHeader >
      <ng-template let-group="group" let-expanded="expanded" ngx-datatable-group-header-template>
        <div style="padding-left: -15px;">
          <a
            [class.datatable-icon-right]="!expanded"
            [class.datatable-icon-down]="expanded"
            title="Expand/Collapse Group"
            (click)="toggleExpandGroup(group)">
            <b>{{group.value[0].group}}</b>
          </a>
        </div>
      </ng-template>
    </ngx-datatable-group-header>
.
.
.

In component.ts

@ViewChild('myTable') table: any;

public onToggleExpandGroup(group) {
 
    setTimeout(() => {
      this.table.bodyComponent.scroller.scrollWidth = this.table.bodyComponent.innerWidth;
    }, 500)

    this.table.groupHeader.toggleExpandGroup(group);
 }

[AllynVo]

Hi is there a way to fix this? I still get this problem and I noticed it still occurs even on the swimlane site for the row grouping table example. @kaluginserg

[vivek050495]

Hai i'm facing same ,any updates on this issue

[edugal-parkland]

I'm having the same issue with grouping and scrollx: true. After several tries, i found out this solution :

Use the .wrap tag in jquery to append a div with overflow-x: scroll to your table in the InitComplete function

var tableSettings = {
            dom: "Blfrtip",
            ... (All other settings)
            initComplete: function () {
                $('#productRefundCostTable').wrap('<div style="overflow-x: scroll;">');
            }
        };