# Row Reorder

The current article discussed how the rows of the Kendo UI for Vue Grid component can be reordered.

Two examples are provided below, each demonstrating a different approach to styling the line that indicates where a given row will be moved.

* [Use separate component to style the drop line](https://www.telerik.com/kendo-vue-ui-develop/components/grid/rows/row-reorder#use-separate-component-to-style-the-drop-line-inside-the-grid), or
* [Use CSS to style the drop line](https://www.telerik.com/kendo-vue-ui-develop/components/grid/rows/row-reorder#use-css-to-style-the-drop-line-inside-the-grid).

## Use separate component to style the drop line inside the Grid

The below example uses the `DragPointer` component to visualize where the moved row will be dropped.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/grid/rowreorder/component/source.txt)

## Use CSS to style the drop line inside the Grid

The drop position of the moved Grid row in the below example is styled only with CSS. In the template of the `CustomCell` component there is the following Grid cell definition. Each of the `td` elements in the below code has a `tdClass` class that is used to visualize the drop line.

```jsx
<td :data-itemid="dataItem.ProductID" :class="tdClass">
    <span class="k-icon k-i-reorder"
            :style="{cursor: 'move'}">
    </span>
</td>

<td v-else :data-itemid="dataItem.ProductID" :class="tdClass">
{{ getNestedValue(field, dataItem) }}
</td>
```

The `tdClass` is a computed property controlled by `dropPosition` prop passed from the parent component.

The following example demonstrates how to implement row reordering in the Kendo UI for Vue Grid using CSS to style the drop line. The `tdClass` is used to apply the appropriate CSS class to the `td` elements based on the current drop position.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/grid/rowreorder/css/source.txt)

## Suggested Links

* [API Reference of the Grid](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridprops)
* [API Index of the Grid](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api)
* [Grid - Drag and Drop Rows Between Two Grids](https://www.telerik.com/kendo-vue-ui-develop/components/knowledge-base/grid-drag-and-drop-rows-between-two-grids)
* [Add Style to a Dragged Row in the Grid](https://www.telerik.com/kendo-vue-ui-develop/components/knowledge-base/grid-style-dragged-row-on-row-reorder)