React Grid Column Reordering broken in 3.0.0?

[Chris]

Moved @devexpress/dx-react-grid to 3.0.0 from 2.76, also with @devexpress/dx-react-grid-bootstrap4

Snip of Grid config is:

                                <Table
                                    key='FlightID'
                                    tableComponent={StripedTable}
                                />
                                <TableColumnReordering
                                    order={columnorder}
                                    onOrderChange={(colorder:string[]) =>{
                                        setColumnorder(colorder);
                                        localStorage.setItem(FLIGHTS_COLUMNORDER, JSON.stringify(colorder));
                                    }}  
                                /> 

(there is separate code to set columnorder on page load)

With 2.7.6, dragging columns to reorder works and is persisted to localStorage as expected.

with 3.0.0, columns appear to drag, but onOrderChange event is not fired on drop, except on first load of grid.

So, one reordering action can be done but none thereafter.

Reverting back to 2.7.6 resolves the issue without any code changes

React 17, Chrome

[Shpileva Yuliya]

Hi @tyddynonn,

I created examples with column reordering in v2.7.6 and v3.0.0. In both versions, the onOrderChange event fires in the same way. Could you modify the examples to show when the event works differently.

[Chris]

Thanks

Your examples obviously work, but my code definitely behaves differently between 2.7.6 and 3.0.0.

I'm afraid I don't have time right now to develop an example, and I can't share my app here, but here are the relevant bits:

I don't use the 'defaultOrder' prop, rather I set the initial column order either from a locally-persisted state or a default order:

    const [columnorder, setColumnorder] = useState<Array<string>>([]);
    
    useEffect(()=>{
        const defaultColumnorder =     
            [
            'FlightID',
            'FlightDate',
            'PilotName',
            'Glider',
            'Task',
            'ScoringDistance',
            'TaskTime',
            'Speed',
            'HandicapSpeed',
            'MaxHeight',
            'HeightGain',
            'XCPoints',
            'HeightPoints',
            'PointsTotal',
            ];
            let colorder = localStorage.getItem(DAILYSCORES_COLUMNORDER);
            setColumnorder(colorder ? JSON.parse(colorder) : defaultColumnorder);
    },[]);

Later, in the Table component:

      <TableColumnReordering
          order={columnorder}
          onOrderChange={(colorder:string[]) =>{
              Log(`Column Order set to `, colorder)
              setColumnorder(colorder);
              localStorage.setItem(DAILYSCORES_COLUMNORDER, JSON.stringify(colorder));
          }}  
          />

In 2.7.6, this all works as expected.

if I change my package.json to

    "@devexpress/dx-react-core": "^3.0.0",
    "@devexpress/dx-react-grid": "^3.0.0",
    "@devexpress/dx-react-grid-bootstrap4": "^3.0.0",
    "@devexpress/dx-react-grid-export": "^3.0.0",

and make no other changes, the code breaks.

On the first drag-drop, all works, the column order changes and the Log(`Column Order set to `, colorder) is called as expected. But thereafter, altho' the DragDropProvider seems to be working (column headers can be dragged), when a dragged header is dropped the column order is not changed and the onOrderChange code is not executed.

I'd like to move to 3.0.0 but don't have any pressing need, so I'll stick with 2.7.6 for the moment.

[Shpileva Yuliya]

@tyddynonn

Unfortunately, I couldn't reproduce the issue. On my side, everything works as expected in controlled and uncontrolled mode with the Table and VirtualTable plugins. Please share more details about your grid configuration or an example where the issue is reproduced.

[Chris]

It's a weird one. If I modify your 3.0.0 examples to use the useEffect/persistence logic I have in my app, column reordering still works.
There must be some kind of side effect from logic elsewhere in my app. I will dig deeper and post back,.

[Chris]

My app fetches the row data from an API, using server-side sorting and paging.
Anything that triggers a data fetch (e.g. a sort or a page switch) 'resets' the issue with column ordering and allows a new successful drag and drop operation.
When time allows I will try to create a sandbox that uses the same architecture as my app & see if that reproduces the problem

[Chris]

I finally got to the bottom of this.

I was using a dedicated component to render the table:

export const StripedTable: React.FC<TableProps> = (props) => (
    <Table.Table
        {...props}
        className="table-striped"
    />
);

and in my Grid definition

<Table
   columnExtensions={columnwidths}
   tableComponent={StripedTable}
/>

In 2.7.6, this all worked fine. In 3.0.0 (and 3.0.1) dragging columns is broken.

Removing
tableComponent={StripedTable} fixed the problem in 3.0.0 and 3.0.1.

No idea why.

[Shpileva Yuliya]

@tyddynonn

I didn't manage to reproduce the issue. Could you please modify this example to demonstrate the problematic behavior?

[no-response]

This issue has been automatically closed because there has been no response to our request for more information from the original author. With only the information that is currently in the issue, we don't have enough information to take action. Please reach out if you have or find the answers we need so that we can investigate further.