# Reordering Rows

The Grid comes with a built-in reordering [column type](https://www.telerik.com/kendo-react-ui-develop/components/grid/api/gridcolumntype), allowing you to easily change the order of each row by dragging it to the target position.

## Getting Started

Implementing row reordering requires the following steps:

1. Enable the [`rowReorderable`](https://www.telerik.com/kendo-react-ui-develop/components/grid/api/gridprops#rowReorderable) prop of the Grid.

```jsx
<Grid rowReorderable={{ enabled: true }}>
```

1. Add Grid column with **reorder** [`columnType`](https://www.telerik.com/kendo-react-ui-develop/components/grid/api/gridrowprops) to render the built-in drag handles to every row.

```jsx
<Column columnType="reorder" width={60} />
```

1. Handle the [`onRowReorder`](https://www.telerik.com/kendo-react-ui-develop/components/grid/api/gridprops#onRowReorder) event of the Grid in order to update the data with the new row indexes. You can use the `dropPosition` available in the [`GridRowReorderEvent`](https://www.telerik.com/kendo-react-ui-develop/components/grid/api/gridrowreorderevent#dropPosition) object to calculate the target position of the dragged row.

```jsx
 <Grid onRowReorder={handleRowReorder}>
```

```JavaScript
const handleRowReorder = (event: GridRowReorderEvent) => {
    const reorderedData = [...data];
    const droppedItemIndex = data.findIndex((item) => item === event.droppedDataItem);

    event.draggedDataItems.forEach((draggedItem) => {
        const draggedItemIndex = data.findIndex((item) => item === draggedItem);
        const idxToAdd: number = calculateIndexToAdd(draggedItemIndex, droppedItemIndex, event.dropPosition)!;

        reorderedData.splice(draggedItemIndex, 1);
        reorderedData.splice(idxToAdd, 0, event.draggedDataItems[0]);
    });

    setData(reorderedData);
};

const calculateIndexToAdd = (dragIndex: number, dropIndex: number, dropPosition: GridReorderDropPosition) => {
    // Account for the index shift after the dragged item is removed from the array.
    const isDropPosition = dropPosition === 'after';

    if (dragIndex > dropIndex) {
        return isDropPosition ? dropIndex + 1 : dropIndex;
    }

    return isDropPosition ? dropIndex : dropIndex - 1;
};
```

The following example demonstrates this approach in action:

[Demo Source](https://demos.telerik.com/kendo-react-ui/grid/row-reordering/custom/func/source.txt)

## Built-in Browser APIs

The following example demonstrates an approach that utilizes the [HTML Drag and Drop API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API).

[Demo Source](https://demos.telerik.com/kendo-react-ui/grid/row-reordering/native/func/source.txt)

## Suggested Links

* [Multi-row Reordering](https://www.telerik.com/kendo-react-ui-develop/components/grid/selection/multi-row-selection#multi-row-reordering)
* [Detail Rows Reordering](https://www.telerik.com/kendo-react-ui-develop/components/grid/rows/detail#detail-rows-and-row-reordering)
* [API of the HTML Drag and Drop Functionality](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API)
* [API Reference of the Grid](https://www.telerik.com/kendo-react-ui-develop/components/grid/api/gridprops)
* [API Index of the Grid](https://www.telerik.com/kendo-react-ui-develop/components/grid/api)