Angular Data GridEmpty Data State

Display empty data state overlays and provide user feedback when your data grid has no data to display using the Empty Data State plugin.

On this page

• Overview
• Basic configuration
• Custom configuration
• Dynamic messages based on source
• Localize empty data state
• Related API reference

Overview

The Empty Data State plugin provides a user-friendly overlay system for Handsontable when there's no data to display. It automatically detects when your table is empty or when all data is hidden by filters, and displays an appropriate message with optional action buttons.

With simplicity and effectiveness in mind, the empty data state plugin was designed to provide a consistent user experience with customizable appearance and behavior. It automatically integrates with the Filters plugin to provide context-aware messages and actions.

Basic configuration

To enable the Empty Data State plugin, set the emptyDataState option to true or provide a configuration object.

{ "name": "handsontable", "version": "1.0.0", "description": "", "scripts": { "ng": "ng", "start": "ng serve --disable-host-check", "build": "ng build" }, "dependencies": { "@angular/core": "^20.2.0", "@angular/common": "^20.2.0", "@angular/forms": "^20.2.0", "@angular/platform-browser": "^20.2.0", "@angular/platform-browser-dynamic": "^20.2.0", "@angular/animations": "^20.2.0", "@angular/compiler": "^20.2.0", "@angular/router": "^20.2.0", "numbro": "^2.4.0", "rxjs": "^7.8.0", "tslib": "^2.6.2", "zone.js": "~0.15.0", "hyperformula": "^3.0.0", "handsontable": "16.2", "@handsontable/angular-wrapper": "16.2" }, "devDependencies": { "@angular-devkit/build-angular": "^20.2.0", "@angular/localize": "latest", "@angular/service-worker": "latest", "@angular/cli": "^20.2.0", "@angular/compiler-cli": "^20.2.0", "@types/node": "~22.18.0", "ts-node": "~10.9.0", "typescript": "~5.8.0" } } { "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, "newProjectRoot": "projects", "projects": { "sandbox": { "projectType": "application", "schematics": { "@schematics/angular:application": { "strict": true } }, "root": "", "sourceRoot": "src", "prefix": "app", "architect": { "build": { "builder": "@angular-devkit/build-angular:browser", "options": { "outputPath": "dist", "index": "src/index.html", "main": "src/main.ts", "polyfills": ["zone.js"], "tsConfig": "tsconfig.app.json", "styles": [ "node_modules/handsontable/styles/handsontable.min.css", "node_modules/handsontable/styles/ht-theme-main.min.css" ], "scripts": [], "preserveSymlinks": true, "allowedCommonJsDependencies": [ "core-js", "@handsontable/pikaday", "numbro" ] }, "configurations": { "production": { "budgets": [ { "type": "initial", "maximumWarning": "500kb", "maximumError": "1mb" }, { "type": "anyComponentStyle", "maximumWarning": "2kb", "maximumError": "4kb" } ], "outputHashing": "all" }, "development": { "buildOptimizer": false, "optimization": false, "vendorChunk": true, "extractLicenses": false, "sourceMap": true, "namedChunks": true } }, "defaultConfiguration": "production" }, "serve": { "builder": "@angular-devkit/build-angular:dev-server", "options": { "buildTarget": "sandbox:build" }, "configurations": { "production": { "buildTarget": "sandbox:build:production" }, "development": { "buildTarget": "sandbox:build:development" } }, "defaultConfiguration": "development" }, "extract-i18n": { "builder": "@angular-devkit/build-angular:extract-i18n", "options": { "buildTarget": "sandbox:build" } } } } }, "defaultProject": "sandbox", "cli": { "analytics": false } } /* To learn more about this file see: https://angular.io/config/tsconfig. */ { "extends": "./tsconfig.json", "compilerOptions": { "outDir": "./out-tsc/app", "types": [] }, "files": [ "src/main.ts" ], "include": [ "src/**/*.d.ts" ] } /* To learn more about this file see: https://angular.io/config/tsconfig. */ { "compileOnSave": false, "compilerOptions": { "baseUrl": "./", "outDir": "./dist/out-tsc", "forceConsistentCasingInFileNames": true, "strict": true, "noImplicitOverride": true, "noPropertyAccessFromIndexSignature": true, "noImplicitReturns": true, "noFallthroughCasesInSwitch": true, "allowSyntheticDefaultImports": true, "sourceMap": true, "declaration": false, "downlevelIteration": true, "experimentalDecorators": true, "moduleResolution": "node", "importHelpers": true, "target": "ES2022", "module": "ES2022", "useDefineForClassFields": false, "lib": [ "ES2022", "dom" ] }, "angularCompilerOptions": { "disableTypeScriptVersionCheck": true, "enableI18nLegacyMessageIdFormat": false, "strictInjectionParameters": true, "strictInputAccessModifiers": true, "strictTemplates": true } } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Handsontable for Angular example</title> <base href="." /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> </head> <body> <app-example1></app-example1> </body> </html> import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app/app.module'; platformBrowserDynamic() .bootstrapModule(AppModule) .catch((err) => console.error(err)); import { AfterViewInit, Component, ViewChild } from '@angular/core'; import { GridSettings, HotTableComponent } from '@handsontable/angular-wrapper'; @Component({ selector: 'app-example1', template: ` <hot-table #hotTable [settings]="hotSettings!" [data]="hotData" > </hot-table> `, standalone: false }) export class AppComponent implements AfterViewInit { @ViewChild('hotTable') hotTable!: HotTableComponent; readonly hotData = []; readonly hotSettings: GridSettings = { height: 'auto', colHeaders: true, rowHeaders: true, navigableHeaders: true, dropdownMenu: true, filters: true, emptyDataState: true, // Enable empty data state with default settings }; } 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'; import { AppComponent } from './app.component'; // register Handsontable's modules registerAllModules(); export const appConfig: ApplicationConfig = { providers: [ { provide: HOT_GLOBAL_CONFIG, useValue: { themeName: 'ht-theme-main', license: NON_COMMERCIAL_LICENSE, } as HotGlobalConfig } ], }; @NgModule({ imports: [ BrowserModule, HotTableModule, CommonModule ], declarations: [ AppComponent ], providers: [...appConfig.providers], bootstrap: [ AppComponent ] }) export class AppModule { }

import { enableProdMode } from '@angular/core'; enableProdMode(); /* file: app.component.ts */ import { AfterViewInit, Component, ViewChild } from '@angular/core'; import { GridSettings, HotTableComponent } from '@handsontable/angular-wrapper'; @Component({ selector: 'app-example1', template: ` <hot-table #hotTable [settings]="hotSettings!" [data]="hotData" > </hot-table> `, standalone: false }) export class AppComponent implements AfterViewInit { @ViewChild('hotTable') hotTable!: HotTableComponent; readonly hotData = []; readonly hotSettings: GridSettings = { height: 'auto', colHeaders: true, rowHeaders: true, navigableHeaders: true, dropdownMenu: true, filters: true, emptyDataState: true, // Enable empty data state with default settings }; } /* 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'; // register Handsontable's modules registerAllModules(); export const appConfig: ApplicationConfig = { providers: [ { provide: HOT_GLOBAL_CONFIG, useValue: { themeName: 'ht-theme-main', license: NON_COMMERCIAL_LICENSE, } as HotGlobalConfig } ], }; @NgModule({ imports: [ BrowserModule, HotTableModule, CommonModule ], declarations: [ AppComponent ], providers: [...appConfig.providers], bootstrap: [ AppComponent ] }) export class AppModule { } import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; platformBrowserDynamic() .bootstrapModule(AppModule) .catch(err => { console.error(err) }); <script src="https://cdn.jsdelivr.net/npm/handsontable@16.2/dist/handsontable.full.min.js"></script> <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@16.2/styles/handsontable.min.css" /> <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@16.2/styles/ht-theme-main.css" /> <script src="https://cdn.jsdelivr.net/npm/rxjs@6/bundles/rxjs.umd.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/core-js@2/client/core.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/zone.js@0.15.0/bundles/zone.umd.min.js"></script> <script src="https://handsontable.com/docs/scripts/prebuilt-umd/angular-core-primitives-signals.umd.min.js"></script> <script src="https://handsontable.com/docs/scripts/prebuilt-umd/angular-compiler.umd.min.js"></script> <script src="https://handsontable.com/docs/scripts/prebuilt-umd/angular-core.umd.min.js"></script> <script src="https://handsontable.com/docs/scripts/prebuilt-umd/angular-common.umd.min.js"></script> <script src="https://handsontable.com/docs/scripts/prebuilt-umd/angular-forms.umd.min.js"></script> <script src="https://handsontable.com/docs/scripts/prebuilt-umd/angular-platformBrowser.umd.min.js"></script> <script src="https://handsontable.com/docs/scripts/prebuilt-umd/angular-platformBrowserDynamic.umd.min.js"></script> <script src="https://handsontable.com/docs/scripts/prebuilt-umd/handsontable-angular-wrapper.umd.min.js"></script> <script src="https://handsontable.com/docs/scripts/fixer.js"></script> <app-example1></app-example1>

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

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

  readonly hotData = [];

  readonly hotSettings: GridSettings = {
    height: 'auto',
    colHeaders: true,
    rowHeaders: true,
    navigableHeaders: true,
    dropdownMenu: true,
    filters: true,
    emptyDataState: true, // Enable empty data state with default settings
  };
}



/* 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';

import { AppComponent } from './app.component';

// register Handsontable's modules
registerAllModules();

export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: HOT_GLOBAL_CONFIG,
      useValue: {
        themeName: 'ht-theme-main',
        license: NON_COMMERCIAL_LICENSE,
      } as HotGlobalConfig
    }
  ],
};

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

export class AppModule { }

Custom configuration

The empty data state supports customization of the title, description, and action buttons.

{ "name": "handsontable", "version": "1.0.0", "description": "", "scripts": { "ng": "ng", "start": "ng serve --disable-host-check", "build": "ng build" }, "dependencies": { "@angular/core": "^20.2.0", "@angular/common": "^20.2.0", "@angular/forms": "^20.2.0", "@angular/platform-browser": "^20.2.0", "@angular/platform-browser-dynamic": "^20.2.0", "@angular/animations": "^20.2.0", "@angular/compiler": "^20.2.0", "@angular/router": "^20.2.0", "numbro": "^2.4.0", "rxjs": "^7.8.0", "tslib": "^2.6.2", "zone.js": "~0.15.0", "hyperformula": "^3.0.0", "handsontable": "16.2", "@handsontable/angular-wrapper": "16.2" }, "devDependencies": { "@angular-devkit/build-angular": "^20.2.0", "@angular/localize": "latest", "@angular/service-worker": "latest", "@angular/cli": "^20.2.0", "@angular/compiler-cli": "^20.2.0", "@types/node": "~22.18.0", "ts-node": "~10.9.0", "typescript": "~5.8.0" } } { "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, "newProjectRoot": "projects", "projects": { "sandbox": { "projectType": "application", "schematics": { "@schematics/angular:application": { "strict": true } }, "root": "", "sourceRoot": "src", "prefix": "app", "architect": { "build": { "builder": "@angular-devkit/build-angular:browser", "options": { "outputPath": "dist", "index": "src/index.html", "main": "src/main.ts", "polyfills": ["zone.js"], "tsConfig": "tsconfig.app.json", "styles": [ "node_modules/handsontable/styles/handsontable.min.css", "node_modules/handsontable/styles/ht-theme-main.min.css" ], "scripts": [], "preserveSymlinks": true, "allowedCommonJsDependencies": [ "core-js", "@handsontable/pikaday", "numbro" ] }, "configurations": { "production": { "budgets": [ { "type": "initial", "maximumWarning": "500kb", "maximumError": "1mb" }, { "type": "anyComponentStyle", "maximumWarning": "2kb", "maximumError": "4kb" } ], "outputHashing": "all" }, "development": { "buildOptimizer": false, "optimization": false, "vendorChunk": true, "extractLicenses": false, "sourceMap": true, "namedChunks": true } }, "defaultConfiguration": "production" }, "serve": { "builder": "@angular-devkit/build-angular:dev-server", "options": { "buildTarget": "sandbox:build" }, "configurations": { "production": { "buildTarget": "sandbox:build:production" }, "development": { "buildTarget": "sandbox:build:development" } }, "defaultConfiguration": "development" }, "extract-i18n": { "builder": "@angular-devkit/build-angular:extract-i18n", "options": { "buildTarget": "sandbox:build" } } } } }, "defaultProject": "sandbox", "cli": { "analytics": false } } /* To learn more about this file see: https://angular.io/config/tsconfig. */ { "extends": "./tsconfig.json", "compilerOptions": { "outDir": "./out-tsc/app", "types": [] }, "files": [ "src/main.ts" ], "include": [ "src/**/*.d.ts" ] } /* To learn more about this file see: https://angular.io/config/tsconfig. */ { "compileOnSave": false, "compilerOptions": { "baseUrl": "./", "outDir": "./dist/out-tsc", "forceConsistentCasingInFileNames": true, "strict": true, "noImplicitOverride": true, "noPropertyAccessFromIndexSignature": true, "noImplicitReturns": true, "noFallthroughCasesInSwitch": true, "allowSyntheticDefaultImports": true, "sourceMap": true, "declaration": false, "downlevelIteration": true, "experimentalDecorators": true, "moduleResolution": "node", "importHelpers": true, "target": "ES2022", "module": "ES2022", "useDefineForClassFields": false, "lib": [ "ES2022", "dom" ] }, "angularCompilerOptions": { "disableTypeScriptVersionCheck": true, "enableI18nLegacyMessageIdFormat": false, "strictInjectionParameters": true, "strictInputAccessModifiers": true, "strictTemplates": true } } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Handsontable for Angular example</title> <base href="." /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> </head> <body> <app-example2></app-example2> </body> </html> import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app/app.module'; platformBrowserDynamic() .bootstrapModule(AppModule) .catch((err) => console.error(err)); import { Component, ViewChild } from '@angular/core'; import { GridSettings, HotTableComponent } from '@handsontable/angular-wrapper'; @Component({ selector: 'app-example2', template: ` <hot-table #hotTable [settings]="hotSettings!" [data]="hotData" > </hot-table> `, standalone: false }) export class AppComponent { @ViewChild('hotTable') hotTable!: HotTableComponent; readonly hotData = []; readonly hotSettings: GridSettings = { height: 'auto', colHeaders: ['First Name', 'Last Name', 'Email'], rowHeaders: true, navigableHeaders: true, dropdownMenu: true, filters: true, emptyDataState: { message: { title: 'No data available', description: 'Please add some data to get started.', buttons: [ { text: 'Add Sample Data', type: 'primary', callback: () => { // Add some sample data this.hotTable.hotInstance.loadData([ ['John', 'Doe', 'john@example.com'], ['Jane', 'Smith', 'jane@example.com'], ['Bob', 'Johnson', 'bob@example.com'], ['Alice', 'Johnson', 'alice@example.com'], ]); } } ] } }, }; } 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'; import { AppComponent } from './app.component'; // register Handsontable's modules registerAllModules(); export const appConfig: ApplicationConfig = { providers: [ { provide: HOT_GLOBAL_CONFIG, useValue: { themeName: 'ht-theme-main', license: NON_COMMERCIAL_LICENSE, } as HotGlobalConfig } ], }; @NgModule({ imports: [ BrowserModule, HotTableModule, CommonModule ], declarations: [ AppComponent ], providers: [...appConfig.providers], bootstrap: [ AppComponent ] }) export class AppModule { }

import { enableProdMode } from '@angular/core'; enableProdMode(); /* file: app.component.ts */ import { Component, ViewChild } from '@angular/core'; import { GridSettings, HotTableComponent } from '@handsontable/angular-wrapper'; @Component({ selector: 'app-example2', template: ` <hot-table #hotTable [settings]="hotSettings!" [data]="hotData" > </hot-table> `, standalone: false }) export class AppComponent { @ViewChild('hotTable') hotTable!: HotTableComponent; readonly hotData = []; readonly hotSettings: GridSettings = { height: 'auto', colHeaders: ['First Name', 'Last Name', 'Email'], rowHeaders: true, navigableHeaders: true, dropdownMenu: true, filters: true, emptyDataState: { message: { title: 'No data available', description: 'Please add some data to get started.', buttons: [ { text: 'Add Sample Data', type: 'primary', callback: () => { // Add some sample data this.hotTable.hotInstance.loadData([ ['John', 'Doe', 'john@example.com'], ['Jane', 'Smith', 'jane@example.com'], ['Bob', 'Johnson', 'bob@example.com'], ['Alice', 'Johnson', 'alice@example.com'], ]); } } ] } }, }; } /* 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'; // register Handsontable's modules registerAllModules(); export const appConfig: ApplicationConfig = { providers: [ { provide: HOT_GLOBAL_CONFIG, useValue: { themeName: 'ht-theme-main', license: NON_COMMERCIAL_LICENSE, } as HotGlobalConfig } ], }; @NgModule({ imports: [ BrowserModule, HotTableModule, CommonModule ], declarations: [ AppComponent ], providers: [...appConfig.providers], bootstrap: [ AppComponent ] }) export class AppModule { } import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; platformBrowserDynamic() .bootstrapModule(AppModule) .catch(err => { console.error(err) }); <script src="https://cdn.jsdelivr.net/npm/handsontable@16.2/dist/handsontable.full.min.js"></script> <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@16.2/styles/handsontable.min.css" /> <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@16.2/styles/ht-theme-main.css" /> <script src="https://cdn.jsdelivr.net/npm/rxjs@6/bundles/rxjs.umd.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/core-js@2/client/core.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/zone.js@0.15.0/bundles/zone.umd.min.js"></script> <script src="https://handsontable.com/docs/scripts/prebuilt-umd/angular-core-primitives-signals.umd.min.js"></script> <script src="https://handsontable.com/docs/scripts/prebuilt-umd/angular-compiler.umd.min.js"></script> <script src="https://handsontable.com/docs/scripts/prebuilt-umd/angular-core.umd.min.js"></script> <script src="https://handsontable.com/docs/scripts/prebuilt-umd/angular-common.umd.min.js"></script> <script src="https://handsontable.com/docs/scripts/prebuilt-umd/angular-forms.umd.min.js"></script> <script src="https://handsontable.com/docs/scripts/prebuilt-umd/angular-platformBrowser.umd.min.js"></script> <script src="https://handsontable.com/docs/scripts/prebuilt-umd/angular-platformBrowserDynamic.umd.min.js"></script> <script src="https://handsontable.com/docs/scripts/prebuilt-umd/handsontable-angular-wrapper.umd.min.js"></script> <script src="https://handsontable.com/docs/scripts/fixer.js"></script> <app-example2></app-example2>

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

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

  readonly hotData = [];

  readonly hotSettings: GridSettings = {
    height: 'auto',
    colHeaders: ['First Name', 'Last Name', 'Email'],
    rowHeaders: true,
    navigableHeaders: true,
    dropdownMenu: true,
    filters: true,
    emptyDataState: {
      message: {
        title: 'No data available',
        description: 'Please add some data to get started.',
        buttons: [
          {
            text: 'Add Sample Data',
            type: 'primary',
            callback: () => {
              // Add some sample data
              this.hotTable.hotInstance.loadData([
                ['John', 'Doe', 'john@example.com'],
                ['Jane', 'Smith', 'jane@example.com'],
                ['Bob', 'Johnson', 'bob@example.com'],
                ['Alice', 'Johnson', 'alice@example.com'],
              ]);
            }
          }
        ]
      }
    },
  };
}



/* 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';

import { AppComponent } from './app.component';

// register Handsontable's modules
registerAllModules();

export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: HOT_GLOBAL_CONFIG,
      useValue: {
        themeName: 'ht-theme-main',
        license: NON_COMMERCIAL_LICENSE,
      } as HotGlobalConfig
    }
  ],
};

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

export class AppModule { }

Dynamic messages based on source

You can provide different messages based on the source of the empty state (e.g., filters vs. no data). This allows for more contextual user guidance.

{ "name": "handsontable", "version": "1.0.0", "description": "", "scripts": { "ng": "ng", "start": "ng serve --disable-host-check", "build": "ng build" }, "dependencies": { "@angular/core": "^20.2.0", "@angular/common": "^20.2.0", "@angular/forms": "^20.2.0", "@angular/platform-browser": "^20.2.0", "@angular/platform-browser-dynamic": "^20.2.0", "@angular/animations": "^20.2.0", "@angular/compiler": "^20.2.0", "@angular/router": "^20.2.0", "numbro": "^2.4.0", "rxjs": "^7.8.0", "tslib": "^2.6.2", "zone.js": "~0.15.0", "hyperformula": "^3.0.0", "handsontable": "16.2", "@handsontable/angular-wrapper": "16.2" }, "devDependencies": { "@angular-devkit/build-angular": "^20.2.0", "@angular/localize": "latest", "@angular/service-worker": "latest", "@angular/cli": "^20.2.0", "@angular/compiler-cli": "^20.2.0", "@types/node": "~22.18.0", "ts-node": "~10.9.0", "typescript": "~5.8.0" } } { "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, "newProjectRoot": "projects", "projects": { "sandbox": { "projectType": "application", "schematics": { "@schematics/angular:application": { "strict": true } }, "root": "", "sourceRoot": "src", "prefix": "app", "architect": { "build": { "builder": "@angular-devkit/build-angular:browser", "options": { "outputPath": "dist", "index": "src/index.html", "main": "src/main.ts", "polyfills": ["zone.js"], "tsConfig": "tsconfig.app.json", "styles": [ "node_modules/handsontable/styles/handsontable.min.css", "node_modules/handsontable/styles/ht-theme-main.min.css" ], "scripts": [], "preserveSymlinks": true, "allowedCommonJsDependencies": [ "core-js", "@handsontable/pikaday", "numbro" ] }, "configurations": { "production": { "budgets": [ { "type": "initial", "maximumWarning": "500kb", "maximumError": "1mb" }, { "type": "anyComponentStyle", "maximumWarning": "2kb", "maximumError": "4kb" } ], "outputHashing": "all" }, "development": { "buildOptimizer": false, "optimization": false, "vendorChunk": true, "extractLicenses": false, "sourceMap": true, "namedChunks": true } }, "defaultConfiguration": "production" }, "serve": { "builder": "@angular-devkit/build-angular:dev-server", "options": { "buildTarget": "sandbox:build" }, "configurations": { "production": { "buildTarget": "sandbox:build:production" }, "development": { "buildTarget": "sandbox:build:development" } }, "defaultConfiguration": "development" }, "extract-i18n": { "builder": "@angular-devkit/build-angular:extract-i18n", "options": { "buildTarget": "sandbox:build" } } } } }, "defaultProject": "sandbox", "cli": { "analytics": false } } /* To learn more about this file see: https://angular.io/config/tsconfig. */ { "extends": "./tsconfig.json", "compilerOptions": { "outDir": "./out-tsc/app", "types": [] }, "files": [ "src/main.ts" ], "include": [ "src/**/*.d.ts" ] } /* To learn more about this file see: https://angular.io/config/tsconfig. */ { "compileOnSave": false, "compilerOptions": { "baseUrl": "./", "outDir": "./dist/out-tsc", "forceConsistentCasingInFileNames": true, "strict": true, "noImplicitOverride": true, "noPropertyAccessFromIndexSignature": true, "noImplicitReturns": true, "noFallthroughCasesInSwitch": true, "allowSyntheticDefaultImports": true, "sourceMap": true, "declaration": false, "downlevelIteration": true, "experimentalDecorators": true, "moduleResolution": "node", "importHelpers": true, "target": "ES2022", "module": "ES2022", "useDefineForClassFields": false, "lib": [ "ES2022", "dom" ] }, "angularCompilerOptions": { "disableTypeScriptVersionCheck": true, "enableI18nLegacyMessageIdFormat": false, "strictInjectionParameters": true, "strictInputAccessModifiers": true, "strictTemplates": true } } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Handsontable for Angular example</title> <base href="." /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> </head> <body> <app-example3></app-example3> </body> </html> import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app/app.module'; platformBrowserDynamic() .bootstrapModule(AppModule) .catch((err) => console.error(err)); import { Component, ViewChild } from '@angular/core'; import { GridSettings, HotTableComponent } from '@handsontable/angular-wrapper'; @Component({ selector: 'app-example3', template: ` <hot-table #hotTable [settings]="hotSettings!" [data]="hotData" > </hot-table> `, standalone: false }) export class AppComponent { @ViewChild('hotTable') hotTable!: HotTableComponent; readonly hotData = []; readonly hotSettings: GridSettings = { height: 'auto', colHeaders: ['First Name', 'Last Name', 'Email'], rowHeaders: true, navigableHeaders: true, dropdownMenu: true, filters: true, contextMenu: true, emptyDataState: { message: (source) => { switch (source) { case 'filters': return { title: 'No results found', description: 'Your current filters are hiding all results. Try adjusting your search criteria.', buttons: [ { text: 'Clear Filters', type: 'secondary', callback: () => { const filtersPlugin = this.hotTable.hotInstance.getPlugin('filters'); if (filtersPlugin) { filtersPlugin.clearConditions(); filtersPlugin.filter(); } } } ] }; default: return { title: 'No data available', description: 'There\'s nothing to display yet. Add some data to get started.', buttons: [ { text: 'Add Sample Data', type: 'primary', callback: () => { this.hotTable.hotInstance.loadData([ ['John', 'Doe', 'john@example.com'], ['Jane', 'Smith', 'jane@example.com'], ['Bob', 'Johnson', 'bob@example.com'], ['Alice', 'Johnson', 'alice@example.com'], ]); } } ] }; } } }, }; } 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'; import { AppComponent } from './app.component'; // register Handsontable's modules registerAllModules(); export const appConfig: ApplicationConfig = { providers: [ { provide: HOT_GLOBAL_CONFIG, useValue: { themeName: 'ht-theme-main', license: NON_COMMERCIAL_LICENSE, } as HotGlobalConfig } ], }; @NgModule({ imports: [ BrowserModule, HotTableModule, CommonModule ], declarations: [ AppComponent ], providers: [...appConfig.providers], bootstrap: [ AppComponent ] }) export class AppModule { }

import { enableProdMode } from '@angular/core'; enableProdMode(); /* file: app.component.ts */ import { Component, ViewChild } from '@angular/core'; import { GridSettings, HotTableComponent } from '@handsontable/angular-wrapper'; @Component({ selector: 'app-example3', template: ` <hot-table #hotTable [settings]="hotSettings!" [data]="hotData" > </hot-table> `, standalone: false }) export class AppComponent { @ViewChild('hotTable') hotTable!: HotTableComponent; readonly hotData = []; readonly hotSettings: GridSettings = { height: 'auto', colHeaders: ['First Name', 'Last Name', 'Email'], rowHeaders: true, navigableHeaders: true, dropdownMenu: true, filters: true, contextMenu: true, emptyDataState: { message: (source) => { switch (source) { case 'filters': return { title: 'No results found', description: 'Your current filters are hiding all results. Try adjusting your search criteria.', buttons: [ { text: 'Clear Filters', type: 'secondary', callback: () => { const filtersPlugin = this.hotTable.hotInstance.getPlugin('filters'); if (filtersPlugin) { filtersPlugin.clearConditions(); filtersPlugin.filter(); } } } ] }; default: return { title: 'No data available', description: 'There\'s nothing to display yet. Add some data to get started.', buttons: [ { text: 'Add Sample Data', type: 'primary', callback: () => { this.hotTable.hotInstance.loadData([ ['John', 'Doe', 'john@example.com'], ['Jane', 'Smith', 'jane@example.com'], ['Bob', 'Johnson', 'bob@example.com'], ['Alice', 'Johnson', 'alice@example.com'], ]); } } ] }; } } }, }; } /* 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'; // register Handsontable's modules registerAllModules(); export const appConfig: ApplicationConfig = { providers: [ { provide: HOT_GLOBAL_CONFIG, useValue: { themeName: 'ht-theme-main', license: NON_COMMERCIAL_LICENSE, } as HotGlobalConfig } ], }; @NgModule({ imports: [ BrowserModule, HotTableModule, CommonModule ], declarations: [ AppComponent ], providers: [...appConfig.providers], bootstrap: [ AppComponent ] }) export class AppModule { } import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; platformBrowserDynamic() .bootstrapModule(AppModule) .catch(err => { console.error(err) }); <script src="https://cdn.jsdelivr.net/npm/handsontable@16.2/dist/handsontable.full.min.js"></script> <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@16.2/styles/handsontable.min.css" /> <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@16.2/styles/ht-theme-main.css" /> <script src="https://cdn.jsdelivr.net/npm/rxjs@6/bundles/rxjs.umd.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/core-js@2/client/core.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/zone.js@0.15.0/bundles/zone.umd.min.js"></script> <script src="https://handsontable.com/docs/scripts/prebuilt-umd/angular-core-primitives-signals.umd.min.js"></script> <script src="https://handsontable.com/docs/scripts/prebuilt-umd/angular-compiler.umd.min.js"></script> <script src="https://handsontable.com/docs/scripts/prebuilt-umd/angular-core.umd.min.js"></script> <script src="https://handsontable.com/docs/scripts/prebuilt-umd/angular-common.umd.min.js"></script> <script src="https://handsontable.com/docs/scripts/prebuilt-umd/angular-forms.umd.min.js"></script> <script src="https://handsontable.com/docs/scripts/prebuilt-umd/angular-platformBrowser.umd.min.js"></script> <script src="https://handsontable.com/docs/scripts/prebuilt-umd/angular-platformBrowserDynamic.umd.min.js"></script> <script src="https://handsontable.com/docs/scripts/prebuilt-umd/handsontable-angular-wrapper.umd.min.js"></script> <script src="https://handsontable.com/docs/scripts/fixer.js"></script> <app-example3></app-example3>

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

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

  readonly hotData = [];

  readonly hotSettings: GridSettings = {
    height: 'auto',
    colHeaders: ['First Name', 'Last Name', 'Email'],
    rowHeaders: true,
    navigableHeaders: true,
    dropdownMenu: true,
    filters: true,
    contextMenu: true,
    emptyDataState: {
      message: (source) => {
        switch (source) {
          case 'filters':
            return {
              title: 'No results found',
              description: 'Your current filters are hiding all results. Try adjusting your search criteria.',
              buttons: [
                {
                  text: 'Clear Filters',
                  type: 'secondary',
                  callback: () => {
                    const filtersPlugin = this.hotTable.hotInstance.getPlugin('filters');

                    if (filtersPlugin) {
                      filtersPlugin.clearConditions();
                      filtersPlugin.filter();
                    }
                  }
                }
              ]
            };
          default:
            return {
              title: 'No data available',
              description: 'There\'s nothing to display yet. Add some data to get started.',
              buttons: [
                {
                  text: 'Add Sample Data',
                  type: 'primary',
                  callback: () => {
                    this.hotTable.hotInstance.loadData([
                      ['John', 'Doe', 'john@example.com'],
                      ['Jane', 'Smith', 'jane@example.com'],
                      ['Bob', 'Johnson', 'bob@example.com'],
                      ['Alice', 'Johnson', 'alice@example.com'],
                    ]);
                  }
                }
              ]
            };
        }
      }
    },
  };
}



/* 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';

import { AppComponent } from './app.component';

// register Handsontable's modules
registerAllModules();

export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: HOT_GLOBAL_CONFIG,
      useValue: {
        themeName: 'ht-theme-main',
        license: NON_COMMERCIAL_LICENSE,
      } as HotGlobalConfig
    }
  ],
};

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

export class AppModule { }

Localize empty data state

Translate default empty data state labels using the global translations mechanism. The empty data state plugin introduces the following keys to the language dictionary that you can use to translate the empty state UI:

Key	Default Value
EMPTY_DATA_STATE_TITLE	'No data available'
EMPTY_DATA_STATE_DESCRIPTION	'There's nothing to display yet.'
EMPTY_DATA_STATE_TITLE_FILTERS	'No results found'
EMPTY_DATA_STATE_DESCRIPTION_FILTERS	'It looks like your current filters are hiding all results.'
EMPTY_DATA_STATE_BUTTONS_FILTERS_RESET	'Reset filters'

To learn more about the translation mechanism, see the Languages guide.

Related API reference

• Options: emptyDataState
• Plugins: EmptyDataState
• Plugins: Filters