search

komarovalexander / ka-table

Lightweight MIT React Table component with Sorting, Filtering, Grouping, Virtualization, Editing and many more
http://ka-table.com
MIT License
769 stars 56 forks source link

Reordering group of colomns #400

Closed C0casio45 closed 4 months ago

C0casio45 commented 5 months ago

Hey,

I have this header image 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 commented 5 months ago

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

komarovalexander commented 4 months ago

Hi @C0casio45 reordering grouped columns is not supported yet. I have disabled it for them in the UI (only real columns are draggable started from 9.0.1).

I will wait for more requests before implementing this feature