Locked Rows

Premium

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