Skip to content
+

Rich Tree View - Ordering

Drag and drop your items to reorder them.

Enable drag & drop re-ordering

You can enable the drag & drop re-ordering of items by setting the itemsReordering prop to true:

  • Data Grid
    • @mui/x-data-grid
    • @mui/x-data-grid-pro
    • @mui/x-data-grid-premium
  • Date and Time Pickers
    • @mui/x-date-pickers
    • @mui/x-date-pickers-pro
Press Enter to start editing

Limit the re-ordering

By default, all the items are reorderable. You can prevent the re-ordering of some items using the isItemReorderable prop. The following example shows how to only allow re-ordering of the leaves using the getItemOrderedChildrenIds API method.

  • Data Grid
    • @mui/x-data-grid
    • @mui/x-data-grid-pro
    • @mui/x-data-grid-premium
  • Date and Time Pickers
    • @mui/x-date-pickers
    • @mui/x-date-pickers-pro
Press Enter to start editing

You can also limit the items in which an item can be dropped using the canMoveItemToNewPosition prop. The following example shows how to only allow re-ordering inside the same parent:

  • Data Grid
    • @mui/x-data-grid
    • @mui/x-data-grid-pro
    • @mui/x-data-grid-premium
  • Date and Time Pickers
    • @mui/x-date-pickers
    • @mui/x-date-pickers-pro
Press Enter to start editing

React to an item re-ordering

You can use the onItemPositionChange to send the new position of an item to your backend:

  • Data Grid
    • @mui/x-data-grid
    • @mui/x-data-grid-pro
    • @mui/x-data-grid-premium
  • Date and Time Pickers
    • @mui/x-date-pickers
    • @mui/x-date-pickers-pro

No reorder registered yet

If you want to send the entire dataset to your backend, you can use the getItemTree API method. The following demo demonstrates it by synchronizing the first Tree View with the second one whenever you do a re-ordering:

  • Data Grid
    • @mui/x-data-grid
    • @mui/x-data-grid-pro
    • @mui/x-data-grid-premium
  • Date and Time Pickers
    • @mui/x-date-pickers
    • @mui/x-date-pickers-pro
  • Data Grid
    • @mui/x-data-grid
    • @mui/x-data-grid-pro
    • @mui/x-data-grid-premium
  • Date and Time Pickers
    • @mui/x-date-pickers
    • @mui/x-date-pickers-pro
  • Charts
    • @mui/x-charts
  • Tree View
    • @mui/x-tree-view

Customization

Only trigger the reordering from a drag handle

You can create a custom Tree Item component to render a drag handle icon and only trigger the reordering when dragging from it:

  • Data Grid
    • @mui/x-data-grid
    • @mui/x-data-grid-pro
    • @mui/x-data-grid-premium
  • Date and Time Pickers
    • @mui/x-date-pickers
    • @mui/x-date-pickers-pro
Press Enter to start editing

Common examples

File explorer

The example below is a simplified version of the File Explorer example with drag & drop re-ordering. You can re-order items but only inside folders (or inside the trash).

  • Documents

    • Company

      • Invoice

      • Meeting notes

      • Tasks list

      • Equipment

      • Video conference

    • Personal

    • Group photo

  • History

  • Trash

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.