search

swimlane / ngx-datatable

✨ A feature-rich yet lightweight data-table crafted for Angular
http://swimlane.github.io/ngx-datatable/
MIT License
4.63k stars 1.68k forks source link

Row Grouping and Row Detail do not work together #1540

Open alerubis opened 6 years ago

alerubis commented 6 years ago

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. ngx issue

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:

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

yarkopro commented 5 years ago

Same issue. Any solutions?

AdamHudsonNall commented 5 years ago

Same here.

andyov17 commented 5 years ago

Any update on this?

sacgrover commented 5 years ago

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

marcushill commented 5 years ago

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 commented 5 years ago

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

marcushill commented 5 years ago

@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 commented 4 years ago

Hi Team,

Any update on this??

ali9itani commented 4 years ago

Any updates?

Sandwell commented 4 years ago

This is a very serious library

shubhamyugtia001 commented 4 years ago

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

sacgrover commented 4 years ago

@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 commented 4 years ago

Any Solution or workaround?

HunSpeedi commented 3 years ago

Hi Team! Any update on this issue?

omkarIlink commented 3 years ago

Do we have any solution or workaround for this functionality?

Shaker1978 commented 3 years ago

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 commented 3 years ago

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 commented 2 years ago

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',
      },

:)