Grouped Table Will Not Render Rows with No Children

[robgaston1]

Issue Type

• Bug

Specs

What version are you using?
2.19.1

What browser?
Chrome

Expected Behavior

What did you expect to happen?
I am using vue-good-table with the groupOptions attribute enabled. I am passing in array of objects, some of which have children but some of which do not have children. I would like to see all rows of data, whether or not they have children.

Actual Behavior

What actually happened?
I would like to render every row that is passed in whether or not it has children. Instead, I only see the rows for which the children array has data in it, and the other rows are just missing.

An additional problem is that if you have a parent row with no children, then any rows that come after that row will not be able to properly expand and collapse. I think this is because when the vgt-expand event is emitted, it tries to match the row with an index, and the indexes might be off since not all rows are rendered.

Steps to Reproduce the Problem

Please detail your steps here
In the jsfiddle below, Senior Devs and Junior Devs are rendered because they have objects in the children array If you look at Baby Devs, it has no children and is not rendered. If you add an object there, Baby Devs will get added to the table.

I am wondering if this part of the code is what is causing this to occur

vue-good-table/src/components/Table.vue

Line 843 in b162e68

if (children.length) {

jsfiddle

If you provide a jsfiddle reproducing the issue, it'll be addressed much faster.
Here is an example