New to KendoReact? Learn about KendoReact Free.

Reordering Rows

Updated on Mar 4, 2026

The Data Grid comes with a built-in reordering column type, 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:

Enable the rowReorderable prop of the Grid.

jsx

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

Add Grid column with reorder columnType to render the built-in drag handles to every row.

jsx

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

Handle the 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 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) => {
    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:

Change Theme

Theme

Loading ...

Built-in Browser APIs

The following example demonstrates an approach that utilizes the HTML Drag and Drop API.