Locking Rows

Premium

Updated on Oct 2, 2026

You can lock (pin) rows at the top of the Grid to make them always visible during scrolling.

Getting Started

Pinning rows requires the followings steps:

1. Use the cells prop of the Grid to implement a custom data cell and add the k-grid-row-sticky class and the style top to the rows that will be locked.

   jsx

   const LockRowCell = (props: LockRowCellProps) => {
       let styles = props.style;
       let classNames = props.className;
       // The sticky class and top/bottom offsets pin the row, which requires a fixed rowHeight.
       if (props.dataItem.locked) {
           styles!.top = props.getTop(props.dataItem);
           styles!.bottom = props.getBottom(props.dataItem);
           classNames += ' k-grid-row-sticky';
       }
       return (
           <td
               {...props.tdProps}
               style={{ textAlign: 'center', ...styles }}
               className={classNames}
               onClick={() => props.onClick(props.dataItem)}
           >
               {props.dataItem.locked ? <SvgIcon icon={pinIcon} /> : <SvgIcon icon={unpinIcon} />}
           </td>
       );
   };
   
   const getTop = (dataItem, data) => {
       const allLockedRows = filterBy(data,filterDescriptorLocked);
       const indexOfLockedItem = allLockedRows.findIndex(item=> dataItem.ProductID === item.ProductID);
       // Stack locked rows by their position among the locked rows.
       return indexOfLockedItem * rowHeight;
   }

2. Set rowHeight to the Grid as the locked rows require fixed equal height of all rows in order to correctly calculate their position.

In the following example we use a custom data cell to dynamically lock a row by clicking over the cell.

Example

View Source

Loading ...

Suggested Links

• API Reference of the Grid
• API Index of the Grid