# Locking Columns

Locked (frozen, sticky, or pinned) columns remain visible at all times while the user scrolls the Grid horizontally.

By default, the columns of the Grid are not locked. The locked columns require all columns to have a fixed width.

<CtaPanelOverview></CtaPanelOverview>

The following example demonstrates how to lock and unlock Grid columns by setting the [`locked`](https://www.telerik.com/kendo-react-ui/components/grid/api/gridcolumnprops#locked) property, including toggling a column's locked state dynamically at runtime.

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

## Locked Columns With Column Menu

The [columnMenu](https://www.telerik.com/kendo-react-ui/components/grid/columns/column-menu) can be used to render buttons that will lock and unlock a specific column on click.

In the following example we:

1. Render a custom component inside the column menu that will lock and unlock the column.
2. Update the columns collection when a column is locked/unlocked.
3. Sort them by the `locked` field to show all locked columns on the left.

The following example demonstrates how to lock and unlock Grid columns through a custom column menu button that updates the columns collection dynamically.

[Demo Source](https://demos.telerik.com/kendo-react-ui/grid/locked-column-menu/func/source.txt)

## Locked Column With Custom Cell

When using pinned columns with [a custom data cell](https://www.telerik.com/kendo-react-ui/components/grid/api/gridcolumnprops#cells), the specific styles and classes must be added to the `td` elements. The classes and styles will be part of the cell props.

The following example demonstrates a locked column that uses a custom data cell, passing the required styles and classes to the `td` element to maintain correct pinning behavior.

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

## Suggested Links

* [API Reference of the Grid](https://www.telerik.com/kendo-react-ui/components/grid/api/gridprops)
* [API Index of the Grid](https://www.telerik.com/kendo-react-ui/components/grid/api)