ngx-datatable: Row Grouping and Row Detail do not work together

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

Copy row grouping example
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

About this issue

Original URL
State: open
Created 6 years ago
Reactions: 3
Comments: 18 (4 by maintainers)

Most upvoted comments

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

😃

jtomek on Jan 5, 2022