# Pinning Rows

The Data Grid provides built-in row pinning that lets you lock rows at the top or bottom of the scrollable area. Pinned rows stay visible while the user scrolls through the body data and are immune to filtering and pagination.

## Getting Started

To enable row pinning, set the [`pinnable`](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridprops#pinnable) prop to `true`. The Grid will manage the pinning state internally.

```html
<Grid :pinnable="true">
```

To allow users to pin rows, provide at least one of the following UI entry points:

* A Grid column with the **pin** [`columnType`](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridcolumntype), which renders a built-in pin dropdown for every row.

  ```html
  <GridColumn columnType="pin" />
  ```

You can use either option or both together.

To pre-populate rows that are pinned on initial render, use [`defaultPinnedTopRows`](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridprops#defaultPinnedTopRows) and [`defaultPinnedBottomRows`](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridprops#defaultPinnedBottomRows).

```html
<Grid
    :pinnable="true"
    :default-pinned-top-rows="[products[0], products[1]]"
    :default-pinned-bottom-rows="[products[products.length - 1]]"
>
    <GridColumn columnType="pin" />
    ...
</Grid>
```

The following example demonstrates row pinning in action. Click the pin icon in any row to open the dropdown and choose where to pin the row.

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

## Controlled Mode

When you need full control over which rows are pinned, provide the [`pinnedTopRows`](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridprops#pinnedTopRows) and/or [`pinnedBottomRows`](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridprops#pinnedBottomRows) arrays and handle the [`onRowPinChange`](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridprops#onRowPinChange) event to update them. The [`GridRowPinChangeEvent`](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridrowpinchangeevent) provides the updated arrays and the affected data item.

The following example demonstrates how to implement controlled row pinning. The Grid is initialized with two pinned rows, and the `onRowPinChange` event updates the state of the pinned rows when the user pins or unpins a row.

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

## Custom Pinned Row Rendering

You can customize how pinned rows are rendered using the [`rows.pinnedData`](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridprops#rows) setting or the [`cells.pin`](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridprops#cells) setting for the pin column cells.

```html
<Grid
    :pinnable="true"
    :rows="{ pinnedData: CustomPinnedRow }"
    :cells="{ pin: { data: CustomPinCell } }"
>
```

## 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)