Skip to content
Handsontable dev

Row freezing

Lock the position of specified rows, keeping them visible when scrolling.

Overview

Row freezing locks specific rows of a grid in place, keeping them visible while scrolling to another area of the grid.

This feature is sometimes called “pinned rows”.

Example

The following example specifies two fixed rows with fixedRowsTop: 2. Horizontal scroll bars are needed, so set a container width and overflow: hidden in CSS.

TypeScript
/* file: app.component.ts */
import { Component } from '@angular/core';
import { GridSettings } from '@handsontable/angular-wrapper';


@Component({
  selector: 'app-example1',
  template: `
    <hot-table
      [settings]="hotSettings!" [data]="hotData">
    </hot-table>
  `,
  standalone: false
})
export class AppComponent {


  readonly hotData = new Array(100) // number of rows
    .fill(null)
    .map((_, row) =>
      new Array(50) // number of columns
        .fill(null)
        .map((_, column) => `${row}, ${column}`)
    );


  readonly hotSettings: GridSettings = {
    colWidths: 100,
    width: '100%',
    height: 320,
    rowHeaders: true,
    colHeaders: true,
    fixedRowsTop: 2,
    autoWrapRow: true,
    autoWrapCol: true,
  };
}
/* end-file */




/* file: app.module.ts */
import { NgModule, ApplicationConfig } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { registerAllModules } from 'handsontable/registry';
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, HotTableModule } from '@handsontable/angular-wrapper';
import { CommonModule } from '@angular/common';
import { NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';


/* start:skip-in-compilation */
import { AppComponent } from './app.component';
/* end:skip-in-compilation */


// register Handsontable's modules
registerAllModules();


export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: HOT_GLOBAL_CONFIG,
      useValue: {
        license: NON_COMMERCIAL_LICENSE,
      } as HotGlobalConfig
    }
  ],
};


@NgModule({
  imports: [ BrowserModule, HotTableModule, CommonModule ],
  declarations: [ AppComponent ],
  providers: [...appConfig.providers],
  bootstrap: [ AppComponent ]
})


export class AppModule { }
/* end-file */
HTML
<div>
    <app-example1></app-example1>
</div>

Configuration options

fixedRowsBottom
fixedRowsTop