Locking Rows

Premium

Updated on Mar 4, 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;
       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);
       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.

Change Theme

Theme

Loading ...

Suggested Links

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