primefaces / primefaces/primereact

DataTable: column order via props breaks after drag & drop reorder

Open
#8,476 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Status: Needs Triage
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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.