primefaces / primefaces/primereact
DataTable: column order via props breaks after drag & drop reorder
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
When using DataTable with reorderableColumns, column ordering works correctly when controlled via props and when using drag & drop independently.
However, after performing a drag & drop reorder, updating the column order again via props (e.g. using a “shuffle” button) no longer works correctly.
The component appears to keep an internal column order state after drag & drop that is no longer synchronized with the column order provided via props.
Reproducer
https://stackblitz.com/edit/umv9mwqp?file=src%2FApp.jsx
System Information
primereact: 10.9.7
react: 18.3.1
Steps to reproduce the behavior
Steps to reproduce the behavior
Open the StackBlitz reproducer
Click the Shuffle Columns button
→ Columns reorder correctly
Drag & drop any column to change its order
→ Columns reorder correctly
Click the Shuffle Columns button again
→ Column order does not update correctly / remains stuck
Expected behavior
After using drag & drop to reorder columns, updating the column order via props (e.g. clicking the Shuffle button) should still reorder the columns according to the provided prop/state order.
The DataTable should remain fully controllable by external column state even after user interaction.
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 linked StackBlitz reproducer and inspect the DataTable behavior with reorderableColumns. Compare the external column-order prop before and after drag-and-drop, then verify that clicking Shuffle Columns reorders the columns according to the provided state after user interaction.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 58/100