hideEmptyGroupColumns issue

[radubrehar]

import {
  InfiniteTable,
  DataSource,
  DataSourceData,
  InfiniteTablePropColumns,
  GroupRowsState,
  DataSourceGroupBy,
} from '@infinite-table/infinite-react';
import * as React from 'react';

type Developer = {
  id: number;
  firstName: string;
  lastName: string;
  country: string;
  stack: string;
};

const data: any = [
  {
    data: { country: 'USA' },
    keys: ['USA'],
    totalChildrenCount: 2,
  },
  {
    data: { country: 'Germany' },
    keys: ['Germany'],
    totalChildrenCount: 2,
  },
];

const dataPerKey: Record<string, any> = {
  USA: [
    {
      data: { stack: 'frontend', country: 'USA' },
      keys: ['USA', 'frontend'],
    },
    {
      data: { stack: 'backend', country: 'USA' },
      keys: ['USA', 'backend'],
    },
    {
      data: { stack: 'fullstack', country: 'USA' },
      keys: ['USA', 'fullstack'],
    },
  ],
};

const columns: InfiniteTablePropColumns<Developer> = {
  country: { field: 'country' },
  firstName: { field: 'firstName' },
  stack: { field: 'stack' },
  id: { field: 'id' },
};

const groupRowsState = new GroupRowsState({
  expandedRows: [],
  collapsedRows: true,
});

export default function BaseExample() {
  const groupBy: DataSourceGroupBy<Developer>[] = React.useMemo(
    () => [
      {
        field: 'country',
      },

      { field: 'stack' },
    ],
    [],
  );

  return (
    <DataSource<Developer>
      primaryKey="id"
      data={dataSource}
      groupBy={groupBy}
      defaultGroupRowsState={groupRowsState}
      lazyLoad={true}
    >
      <InfiniteTable<Developer>
        domProps={{
          style: {
            height: '80vh',
          },
        }}
        scrollStopDelay={10}
        hideEmptyGroupColumns
        columns={columns}
        columnDefaultWidth={220}
      />
    </DataSource>
  );
}

const dataSource: DataSourceData<Developer> = ({ groupKeys }) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      if (groupKeys?.length) {
        const data = dataPerKey[groupKeys.join(',')];

        if (data) {
          console.log('data', data);
          resolve({
            data,
            totalCount: data.length,
          });
          return;
        }
      }
      resolve({
        data,
        totalCount: data.length,
      });
    }, 1000);
  });
};

When expanding first group, hideEmptyGroupColumns creates issue that third row is not aligned properly