Row Pinning

The Ignite UI for React Data Table / Data Grid allows Row Pinning by either using keys or the underlying data source items. When a row is pinned, it will be duplicated at the top of the grid and remain fixed there with light gray background and its actual row will be rendered with low opacity.

Demo

You can pin rows in the React data grid by adding the target row’s underlying data item to the pinnedItems collection of the React grid.

Code Snippet

public onGridRef(grid: IgrLiveGrid) {
    this.grid = grid;
    this.grid.pinnedItems.add(this.data[2]);
    this.grid.pinnedItems.add(this.data[4]);
}