TreeTable: Unable to control the column reorder function

[wonlee6]

Describe the bug

I want to prevent reordering if the column index is 0, but I can't seem to stop it.

Even if I return in the onColReorder function when event.dropIndex === 0, column reordering still occurs. Is there a way to control this?

const [nodes, setNodes] = useState<TreeNode[]>([]);

  const [colums, setColums] = useState(() => {
    return columnData.map((item) => (
      <Column
        key={item.field}
        field={item.field}
        header={item.header}
        expander={item.expander}
      />
    ));
  });

  useEffect(() => {
    NodeService.getTreeTableNodes().then((data) => setNodes(data));
  }, []);

  const handleColReorder = (event: TreeTableColReorderEvent) => {
    console.log(event);
    if (event.dropIndex === 0) {
      return;
    }

    setColums((prev) => {
      const dragItem = prev.find((_, index) => index === event.dragIndex);
      const copy = [...prev];

      copy.splice(event.dragIndex, 1);
      copy.splice(event.dropIndex, 0, dragItem!);
      return copy;
    });
  };

  useEffect(() => console.log('colums', colums), [colums]);

  return (
    <div className="card">
      <TreeTable
        value={nodes}
        onColReorder={handleColReorder}
        reorderableColumns
        tableStyle={{ minWidth: '50rem' }}
      >
        {colums}
      </TreeTable>
    </div>
  );
}

const columnData = [
  { field: 'name', header: 'Name', expander: true },
  { field: 'size', header: 'Size', expander: false },
  { field: 'type', header: 'Type', expander: false },
];

Reproducer

https://stackblitz.com/edit/33vczd?file=src%2FApp.tsx

PrimeReact version

10.6.6

React version

18.x

Language

TypeScript

Build / Runtime

Create React App (CRA)

Browser(s)

chrome

Steps to reproduce the behavior

No response

Expected behavior

No response

[sja-cslab]

Your return wont do anything. What you could try is manually reorder the columns array with help of the defined indexes. I guess that columns is the already reordered list.

[wonlee6]

@sja-cslab Could you please explain how to use the onColReorder function to reorder the columns?

I tried to control the columns within the onColReorder function, but it didn't work. I would appreciate your help.

This code prevents the size column from moving to the left of the name column.

https://stackblitz.com/edit/33vczd?file=src%2FApp.tsx

[github-actions[bot]]

Please fork the Stackblitz project and create a case demonstrating your bug report. This issue will be closed if no activities in 20 days.

[sja-cslab]

@wonlee6 Looked into your Stackblitz and tried out what I suggested - however that wont work. I looked into the TreeTable onColReorder code and it looked like the following:

setColumnOrderState(columnOrder);

if (props.onColReorder) {
    props.onColReorder({
        dragIndex: dragColIndex,
        dropIndex: dropColIndex,
        columns: columns
    });
}

That means the ColumnOrderState is already set right before that callback is invoke => no chance to revert that.

@melloware I would like to make that to a feature request or bug, depends on how the people would interpret reorderable.

Wonlee tries to keep a Column on the exact same index all the time - so first column always stays where it is. Tried to set column 0 as reorderable={false} which causes that you cannot move that specific column, but you still can take other columns in front of it which causes a reorder of column 0 without ever touching it

[wonlee6]

@sja-cslab Thank you ! I agree with what you said

[melloware]

OK I changed the type to Enhancement.