Row Grouping and Row Detail do not work together

[alerubis]

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 Row details won't open when row grouping is also active. Furthermore, when group is expanded the detail appears as if it is hooked to the group.

Expected behavior Row detail should open when 'Expand/Collapse Row' link is clicked.

Reproduction of the problem

1. Copy row grouping example
2. Implement row details example
   • Copy 'Row Detail Template' (<ngx-datatable-row-detail>) after 'Group Header Template' (<ngx-datatable-group-header>) and change its content
   • Insert toggle column as first column
   • [Optional] Remove frozenLeft columns
   • Add toggleExpandRow function

What is the motivation / use case for changing the behavior? Can't use Row Grouping and Row Detail together.

Please tell us about your environment:

• Table version: 13.1.0

• Angular version: 6.1.6

• 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 ]

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

Example https://stackblitz.com/edit/angular-ngx-datatable-row-grouping-and-row-detail

[yarkopro]

Same issue. Any solutions?

[AdamHudsonNall]

Same here.

[andyov17]

Any update on this?

[sacgrover]

I am facing the same issue. Anyone able to make workaround of it?

[marcushill]

I attempted to fix it in #1569 about a year ago and we're using a version of this in production now. The code is obviously a year out of date, but I imagine the bug itself hasn't changed much if at all so it might help someone who wants to patch the latest version. Or I could probably update that PR some time next week if no one gets to it first.

[sacgrover]

Thanks @marcushill , It would be a great help. I don't thing this issue will be going to fix in near releases.

[marcushill]

@sacgrover Let me know if #1727 works for you. The build is failing in a way I don't understand (can't start headless chrome maybe?) so I'll probably look into that later.

[sacgrover]

Hi Team,

Any update on this??

[ali9itani]

Any updates?

[Sandwell]

This is a very serious library

[shubhamyugtia001]

issue created in 2018 and here it is 2020 and no solution yet ???

[sacgrover]

@shubhamyugtia001 I also waited for this feature for a long time. I had a case where I needed to implement multiedit where Row Grouping and Row Details were needed together. Finally, I had to create my own custom component for it. Except this feature, ngx-datatable is working fine for my cases.

[ankitchoudhary26]

Any Solution or workaround?

[HunSpeedi]

Hi Team! Any update on this issue?

[omkarIlink]

Do we have any solution or workaround for this functionality?

[Shaker1978]

Do we have any solution or workaround for this functionality?

As far as I understand, there has been a patch (https://github.com/swimlane/ngx-datatable/pull/1727) that has never been released, because of code conflicts. I wonder, if this control is really maintained after all... Any alternatives?

[marcushill]

I submitted that patch years ago (using what little contribution guidelines I could find at the time). I no longer work on a team that consumes this control, but I believe they ended up working off a fork or using a different control due to lack of response on issues at the time.

I've closed my two older PRs since they're so out of date that I'm not going to attempt to pick them back up. Feel free to take any of that code if you want to try to get it merged again.

[jtomek]

I was first disappointed that there was no out-of-box solution. But then I started thinking about it and it's actually quite simple to achieve with CSS.

Reference a component function that <ngx-datatable [rowClass]="getRowClass"> that adds a class with set bottom padding to a row as well as position: relative. I use tailwind and my getRowClass() returns pb-12 relative. Append a column to your columns array (or add it in the template), and set the class to be position: absolute; left:0 and position your cell with bottom: x px; height: x px; to fit in the bottom padding.

      {
        name: '',
        prop: '',
        cellTemplate: this.clmRowDetail,
        cellClass: 'absolute w-full left-0 -bottom-8 h-8 rounded-b bg-gray-100',
      },

:)