primefaces / primefaces/primereact
TreeTable: Unable to control the column reorder function
Nobody has claimed this yet.
- Dominant language
- CSS
- Stars
- 8.3k
- Forks
- 1.2k
- PR merge metrics
- No merged PRs in 30d
Description
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
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the TreeTable column-reordering entry point and reproduce the behavior using the linked StackBlitz example. Trace how onColReorder handles a drop at index 0 and verify the component's resulting column order. Done means the documented handler can prevent that reorder while other valid column moves continue to work.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 42/100