ExtJs grouped-header-grid - how to use it to group headers?

Question

I have tables in ExtJs and I would like to use the grouped-header-grid option. https://examples.sencha.com/extjs/6.2.0/examples/kitchensink/#grouped-header-grid I have files from which data is downloaded. It looks like this:

columns: [
{
  name: 'parent_column',
  title: 'Parent',
  columns: [
    {
      name: 'test_colum',
      title: 'Test',
      type: 'number',
    },
    {
      name: 'test_colum2',
      title: 'Test 2',
      type: 'number',
      formSortOrder: 2,
    },
  ]
}, ....

and where I use it:

columns.forEach(column => {
  const columElement = {
    id: idGen(),
    dataIndex: column.name,
    text: column.title,
    groupable: true,
    hidden: !!column.hidden,
    hideable: false,
    columns: /* child elements i think */,
    field: {
      ...column,
      selectOnFocus: true,
      xtype: 'textfield',
    },
    beforeEdit: () => true,
  }

I want to create logic that when a given header contains child elements, I display them below them, and if they do not, I display an empty space. Each element can have 0, 1 or many child elements. The logic should be reusable, because there will also be tables that have no child elements at all, and then it should be a regular table without grouped-header-grid.

Another thing is that I have a button with a sliding list of headers and the ability to show and hide them by checking the checkbox. Now, when I added grouping options, this mechanism stopped working. I normally pull out a list of columns by:

this.getColumnManager().getColumns();

but now instead of a list of all elements or parent elements as before, I have a list containing only child elements without the parent element.