Reordering group of colomns

[C0casio45]

Hey,

I have this header

Note that some of the columns are hidden in the image, the full list is below

const groupedColumns = [
    {key: "caller", title: "Source", isFilterable: false, columnsKeys: 
    ["caller.id", "caller.name", "caller.reference", "caller.type", "caller.description", "caller.operatedBy"]},
    {key: "callee", title: "Target", isFilterable: false, columnsKeys: 
    ["callee.id", "callee.name", "callee.reference", "callee.type", "callee.description", "callee.operatedBy"]}
  ]

  const columns = [
    { key: "caller.id", title: "ID", dataType: DataType.String, visible: true, isFilterable: false },
    { key: "caller.name", title: "Name", dataType: DataType.String, visible: true, isFilterable: false },
    { key: "caller.reference", title: "Reference", dataType: DataType.String, visible: false, isFilterable: false },
    { key: "caller.type", title: "Type", dataType: DataType.String, visible: false, isFilterable: true },
    { key: "caller.description", title: "Description", dataType: DataType.String, visible: false, isFilterable: false },
    { key: "caller.operatedBy", title: "Operated by", dataType: DataType.String, visible: false, isFilterable: false },

    { key: "callee.id", title: "ID", dataType: DataType.String, visible: true, isFilterable: false },
    { key: "callee.name", title: "Name", dataType: DataType.String, visible: true, isFilterable: false },
    { key: "callee.reference", title: "Reference", dataType: DataType.String, visible: false, isFilterable: false },
    { key: "callee.type", title: "Type", dataType: DataType.String, visible: false, isFilterable: true },
    { key: "callee.description", title: "Description", dataType: DataType.String, visible: false, isFilterable: false },
    { key: "callee.operatedBy", title: "Operated by", dataType: DataType.String, visible: false, isFilterable: false },

    { key: "id", title: "ID", dataType: DataType.String, visible: false, isFilterable: false },
    { key: "name", title: "Name", dataType: DataType.String, visible: true, isFilterable: false },
    { key: "description", title: "Description", dataType: DataType.String, visible: true, isFilterable: false },
    { key: "origin", title: "Origin", dataType: DataType.String, visible: true, isFilterable: true },
    { key: "status", title: "Status", dataType: DataType.String, visible: true, isFilterable: true },
    { key: "projectId", title: "Project ID", dataType: DataType.String, visible: false },
  ];

When I am trying to re-order the groupedColumns I hav this issue

TypeError: Cannot read properties of undefined (reading 'isHeaderFilterPopupShown')
    at TableControlled.js:77:31
    at Array.map (<anonymous>)
    at TableControlled (TableControlled.js:76:21)

TableControlled.tsx#L68

Investigations

When the groupedColumn is moved, the rendered columns object is the same except at the place I tried to move it, an undefined column is set

[komarovalexander]

Hi thanks for the issue. Can I ask you to reproduce it on stackblitz? https://stackblitz.com/edit/table-column-reordering-ts?file=Demo.tsx