Locked Rows

Premium

Updated on Dec 19, 2025

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

Setup

Pinning rows requires the followings steps:

1. Use the cells prop of the Grid to implement a customdata 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

• React Data Grid
• API Reference of the Grid
• API Index of the Grid