[DataGridPro] Update `onColumnOrderChange` behaviour to match `onRowsOrderChange`

[vbynda-gresham]

Order ID 💳

45466

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

The problem in depth 🔍

Dear Developer,

I can see in your documentation following: _In addition, column reordering emits the following events that can be imported:

columnHeaderDragStart: emitted when dragging of a header cell starts. columnHeaderDragEnter: emitted when the cursor enters another header cell while dragging. columnHeaderDragOver: emitted when dragging a header cell over another header cell. columnHeaderDragEnd: emitted when dragging of a header cell stops._

I am not quite sure how to do it. Is there an example of it? I would like to use columnHeaderDragEnd event. onColumnOrderChange is fired multiple times as column dragged through the header. This is not working for me as we are updating API with column order. 'Drag end' would be perfect for us.

Thank you.

Your environment 🌎

`npx @mui/envinfo`

``` Don't forget to mention which browser you used. Output from `npx @mui/envinfo` goes here. ```

[alexfauquette]

We do not have demo using it, because it's mostly for internal use.

You can use it like other events. Its parameters are simple. you will get the field of the column on which the dragEnd occurred.

What are you trying to achieve when the drag end occurs?

[vbynda-gresham]

Thank you for the link. In out application column state is saved in DB via API. When column is moved DB record is updated. onColumnOrderChange generates multiple events as column moves. It feels like a waste of effort to send API messages as column move is not completed. 'drag end' or another event that archives the same(end of move) would be perfect.

I think it is a very common setup, in enterprise apps, for state of the grid to be saved in DB. Is it possible to have this even exposed as grid event handler?

[DanailH]

Hi @vbynda-gresham why aren't you using the onColumnOrderChange prop to react on reordering columns? you can check it's signature here -> https://mui.com/x/api/data-grid/data-grid/#heading-props On another hand, we might benefit from creating a demo showcasing the usage of this prop.

[alexfauquette]

Here is the demo :)

I had to use a ref instead of a state, because if the drop is not well place, the column order is revet just before dispatching the columnHeaderDragEnd event. So the state would not be up to date

https://codesandbox.io/s/eager-shamir-5grln1?file=/demo.tsx

[vbynda-gresham]

onColumnOrderChange fires event as column dragged over the other column(not dropped yet). If i drag my column over 10 columns, it will fire 10 events. I have not interest in those. I have no interest tying to filter or debounce them. I need to know when the column is dropped, in other words, user finished re-ordering. At this point i can save new column layout.

[vbynda-gresham]

@alexfauquette Thank you for the demo https://codesandbox.io/s/eager-shamir-5grln1?file=/demo.tsx. It reproduces exactly what I am talking about. You can see log messages as column being dragged.

[DanailH]

onColumnOrderChange fires event as column dragged over the other column(not dropped yet). If i drag my column over 10 columns, it will fire 10 events. I have not interest in those. I have no interest tying to filter or debounce them. I need to know when the column is dropped, in other words, user finished re-ordering. At this point i can save new column layout.

I think then we should change its behavior to match the one for onRowsOrderChange. I think we didn't do it so far because it will be a breaking change but we can do it now for v6. @vbynda-gresham technically you can still use the onColumnOrderChange by introducing debounce.

[vbynda-gresham]

onRowsOrderChange vs. onRowsOrderChanged does it make sense? Do you use a distinction to indicate 'with past tense' that the action is finished vs. in progress. Or maybe add onRowsOrderChangeEnd? onRowsOrderChange is a good event name for the action that is in progress, maybe someone cares for it.

[alexfauquette]

@alexfauquette Thank you for the demo codesandbox.io/s/eager-shamir-5grln1?file=/demo.tsx. It reproduces exactly what I am talking about. You can see log messages as column being dragged.

Yes, multiple "onColumnOrderChange", but only one "save the new dragging from x to y" (where to put the serve API except if x===y)

[vbynda-gresham]

Pretty much what we are doing. I was hoping to avoid all this craft and use dedicated grid event that shows when column reorder is done.

[konrazem]

What I see in demo there is no event only defaultMuiPrevented info

      <DataGridPro
        columns={[{ field: "id" }, { field: "username" }, { field: "age" }]}
        onColumnOrderChange={(params, event, detials) => {
          // THERE IS NO EVENT TYPE "onRowsOrderChangeEnd". HERE event = { defaultMuiPrevented: false }. I AM NOT SURE WHAT IS THE USE OF THAT 
          console.log({ event });
        }}
        rows={rows}
      />

https://codesandbox.io/s/blissful-grass-cqolct?file=/demo.tsx:445-471

[colespencer1453]

To add to the discussion I find this prop pretty useless unless it emits the current ordering of all of the columns in the grid. I would like to cache and save user preferences as they reorder columns and it is difficult to track that from the params emitted from this event in addition to the issues mentioned above where all that we care about is the final drop position