Skip to content
Handsontable dev

Autofill values

Copy a cell’s value into multiple other cells, using the “fill handle” UI element. Configure the direction of copying, and more, through Handsontable’s API.

Autofill in all directions

Using the tiny square known as the ‘fill handle’ in the corner of the selected cell, you can drag it (drag-down) to repeat the values from the cell. Double click the fill handle in cell B4 where the value is 30 to fill the selection down to the last value in neighboring column, just like it would in Excel or Google Sheets.

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


@Component({
  selector: 'example1-autofill-values',
  standalone: false,
  template: ` <div>
    <hot-table [data]="data" [settings]="gridSettings"></hot-table>
  </div>`,
})
export class Example1AutofillValuesComponent {
  readonly data = [
    ['', 'Tesla', 'Nissan', 'Toyota', 'Honda'],
    ['2017', 10, 11, 12, 13],
    ['2018', 20, 11, 14, 13],
    ['2019', 30, 15, 12, 13],
    ['2020', '', '', '', ''],
    ['2021', '', '', '', ''],
  ];


  readonly gridSettings: GridSettings = {
    rowHeaders: true,
    colHeaders: true,
    fillHandle: true, // possible values: true, false, "horizontal", "vertical",
    height: 'auto',
    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 { Example1AutofillValuesComponent } 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: [ Example1AutofillValuesComponent ],
  providers: [...appConfig.providers],
  bootstrap: [ Example1AutofillValuesComponent ]
})


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

Autofill in a vertical direction only and creating new rows

In this configuration, the fill handle is restricted to move only vertically. New rows are automatically added to the bottom of the table by changing autoInsertRow to true.

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


@Component({
  selector: 'example2-autofill-values',
  standalone: false,
  template: ` <div>
    <hot-table [data]="data" [settings]="gridSettings"></hot-table>
  </div>`,
})
export class Example2AutofillValuesComponent {


  readonly data = [
    ['', 'Tesla', 'Nissan', 'Toyota', 'Honda'],
    ['2017', 10, 11, 12, 13],
    ['2018', 20, 11, 14, 13],
    ['2019', 30, 15, 12, 13],
    ['2020', '', '', '', ''],
    ['2021', '', '', '', ''],
  ];


  readonly gridSettings: GridSettings = {
    rowHeaders: true,
    colHeaders: true,
    fillHandle: {
      direction: 'vertical',
      autoInsertRow: true,
    },
    height: 'auto',
    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 { Example2AutofillValuesComponent } 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: [ Example2AutofillValuesComponent ],
  providers: [...appConfig.providers],
  bootstrap: [ Example2AutofillValuesComponent ]
})


export class AppModule { }
/* end-file */
HTML
<div>
  <example2-autofill-values></example2-autofill-values>
</div>

Configuration options

fillHandle

Hooks

afterAutofill
beforeAutofill
modifyAutofillRange

Plugins

Autofill