Row grouping does not work as expected

[jvandemo]

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'm using the code from the row grouping example. When I try to group rows, the groups seem to overlap each other.

Expected behavior Groups should be listed underneath each other.

Reproduction of the problem In Plnkr the grouping does not seem to output anything: http://plnkr.co/edit/Z1uj3NXxPbZUKlzFUY6D?p=preview

What is the motivation / use case for changing the behavior? Grouping should work as expected.

Please tell us about your environment:

• Table version: 10.2.1

• Angular version: 4.3.5

• Browser: All

• Language: All

Preview of local behavior

[gritman]

hi I also found this bug when I use vertical scroll bar and row grouping in one table, the table contents overlapped.

[CunhaGus]

Your example on plnkr doesn't show any data under 'Grouped', please replace the two methods below in app.ts

constructor() { this.fetch((data) => { this.rows = data; console.log('Data loaded', data); }); }

fetch(cb) { const req = new XMLHttpRequest(); req.open('GET', 'https://unpkg.com/@swimlane/ngx-datatable@10.2.2/assets/data/forRowGrouping.json');

req.onload = () => {
  cb(JSON.parse(req.response));
};

req.send();

}

Regarding the problem this post actually refers to it seems like your might have a problem with the styles you are using. I can't replicate the issue.

[jvandemo]

@CunhaGus — Thank you, the new JSON file fixes the data issue in Plunker.

However, the visual issue still remains when using Angular Material. Can you get grouping to work in Angular Material? We get the result as shown in the animated GIF.

Thanks again for your help, much appreciated!

[CunhaGus]

@jvandemo - No worries. I am glad I could help you move forward a little.

I am no specialist in CSS but if you remove angular material does the grid work? Have you had a look into the file app.css under assets folder of the grid? Maybe there will be something in there that can help you.

Please let us know.

[jvandemo]

@CunhaGus — Thank you, it does not seem to be Angular Material related as far as I can see.

Instead, the problem seems indeed to be related to adding vertical scroll, as suggested by @gritman.

Here is the same datatable with grouping and vertical scroll enabled: http://run.plnkr.co/Tkl7tvHGGf5NiVIM/.

The rows overlap and the datatable does not render properly.

[anu1885]

Is this fixed with maybe latest versions? I have huge data under each group and also I need one outer scroll for groups. Please let me know if anyone got this working. Or if this is planned to be fixed anytime soon.

[przemyslav]

Any update on that?