Password cell type

Use the password cell type to mask confidential values by rendering entered characters as symbols.

The password cell type masks cell values with asterisks. Use it for PIN codes, access codes, or other values that should not be visible in plain text.

Overview

The password cell type behaves like a text cell, the only difference being that it masks its value using asterisks in the cell renderer. An <input type="password"> field is used for the cell editor. Data is stored in the data source as plain text.

1
/* file: app.component.ts */
2
import { Component } from '@angular/core';
3
import { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';
4

5
@Component({
6
  selector: 'example1-password-cell-type',
7
  standalone: true,
8
  imports: [HotTableModule],
9
  template: ` <div>
10
    <hot-table [data]="data" [settings]="gridSettings"></hot-table>
11
  </div>`,
12
})
13
export class AppComponent {
14

15
  readonly data = [
16
    {
17
      id: 1,
18
      name: { first: 'Chris', last: 'Right' },
19
      password: 'plainTextPassword',
20
    },
21
    { id: 2, name: { first: 'John', last: 'Honest' }, password: 'txt' },
22
    { id: 3, name: { first: 'Greg', last: 'Well' }, password: 'longer' },
23
  ];
24

25
  readonly gridSettings: GridSettings = {
26
    colHeaders: ['ID', 'First name', 'Last name', 'Password'],
27
    height: 'auto',
28
    autoWrapRow: true,
29
    autoWrapCol: true,
30
    columns: [
31
      { data: 'id' },
32
      { data: 'name.first' },
33
      { data: 'name.last' },
34
      { data: 'password', type: 'password' },
35
    ]
36
  };
37
}
38
/* end-file */
39

40

41

42
/* file: app.config.ts */
43
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
44
import { registerAllModules } from 'handsontable/registry';
45
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
46

47
// register Handsontable's modules
48
registerAllModules();
49

50
export const appConfig: ApplicationConfig = {
51
  providers: [
52
    provideZoneChangeDetection({ eventCoalescing: true }),
53
    {
54
      provide: HOT_GLOBAL_CONFIG,
55
      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,
56
    },
57
  ],
58
};
59
/* end-file */

1
<div>
2
  <example1-password-cell-type></example1-password-cell-type>
3
</div>

Fixed hash length

By default, every hash has a length equal to the length of its corresponding value. Use option hashLength to set a fixed hash length.

1
/* file: app.component.ts */
2
import { Component } from '@angular/core';
3
import { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';
4

5
@Component({
6
  selector: 'example2-password-cell-type',
7
  standalone: true,
8
  imports: [HotTableModule],
9
  template: ` <div>
10
    <hot-table [data]="data" [settings]="gridSettings"></hot-table>
11
  </div>`,
12
})
13
export class AppComponent {
14

15
  readonly data = [
16
    {
17
      id: 1,
18
      name: { first: 'Chris', last: 'Right' },
19
      password: 'plainTextPassword',
20
    },
21
    { id: 2, name: { first: 'John', last: 'Honest' }, password: 'txt' },
22
    { id: 3, name: { first: 'Greg', last: 'Well' }, password: 'longer' },
23
  ];
24

25
  readonly gridSettings: GridSettings = {
26
    colHeaders: ['ID', 'First name', 'Last name', 'Password'],
27
    height: 'auto',
28
    autoWrapRow: true,
29
    autoWrapCol: true,
30
    columns: [
31
      { data: 'id' },
32
      { data: 'name.first' },
33
      { data: 'name.last' },
34
      { data: 'password', type: 'password', hashLength: 10 },
35
    ]
36
  };
37
}
38
/* end-file */
39

40

41

42
/* file: app.config.ts */
43
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
44
import { registerAllModules } from 'handsontable/registry';
45
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
46

47
// register Handsontable's modules
48
registerAllModules();
49

50
export const appConfig: ApplicationConfig = {
51
  providers: [
52
    provideZoneChangeDetection({ eventCoalescing: true }),
53
    {
54
      provide: HOT_GLOBAL_CONFIG,
55
      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,
56
    },
57
  ],
58
};
59
/* end-file */

1
<div>
2
  <example2-password-cell-type></example2-password-cell-type>
3
</div>

Custom hash symbol

By default, every hash consists of asterisks *. Use the option hashSymbol to set a custom hash symbol. You can use any character, entity, or even HTML. Note that you can’t change the symbol used by the input field due to browser limitations.

1
/* file: app.component.ts */
2
import { Component } from '@angular/core';
3
import { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';
4

5
@Component({
6
  selector: 'example3-password-cell-type',
7
  standalone: true,
8
  imports: [HotTableModule],
9
  template: ` <div>
10
    <hot-table [data]="data" [settings]="gridSettings"></hot-table>
11
  </div>`,
12
})
13
export class AppComponent {
14

15
  readonly data = [
16
    {
17
      id: 1,
18
      name: { first: 'Chris', last: 'Right' },
19
      password: 'plainTextPassword',
20
    },
21
    { id: 2, name: { first: 'John', last: 'Honest' }, password: 'txt' },
22
    { id: 3, name: { first: 'Greg', last: 'Well' }, password: 'longer' },
23
  ];
24

25
  readonly gridSettings: GridSettings = {
26
    colHeaders: ['ID', 'First name', 'Last name', 'Password'],
27
    height: 'auto',
28
    autoWrapRow: true,
29
    autoWrapCol: true,
30
    columns: [
31
      { data: 'id' },
32
      { data: 'name.first' },
33
      { data: 'name.last' },
34
      { data: 'password', type: 'password', hashSymbol: '&#9632;' },
35
    ]
36
  };
37
}
38
/* end-file */
39

40

41

42
/* file: app.config.ts */
43
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
44
import { registerAllModules } from 'handsontable/registry';
45
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
46

47
// register Handsontable's modules
48
registerAllModules();
49

50
export const appConfig: ApplicationConfig = {
51
  providers: [
52
    provideZoneChangeDetection({ eventCoalescing: true }),
53
    {
54
      provide: HOT_GLOBAL_CONFIG,
55
      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,
56
    },
57
  ],
58
};
59
/* end-file */

1
<div>
2
  <example3-password-cell-type></example3-password-cell-type>
3
</div>

Reveal delay

Use the hashRevealDelay option to briefly show each character as you type it. After the delay (in milliseconds) elapses, the character is replaced by the hash symbol. This lets you confirm what you typed without permanently exposing the value.

When hashRevealDelay is set, the editor switches from a native <input type="password"> to a <input type="text"> field with manual masking. Only the most recently typed character stays visible - all preceding characters are already masked.

1
/* file: app.component.ts */
2
import { Component } from '@angular/core';
3
import { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';
4

5
@Component({
6
  selector: 'example4-password-cell-type',
7
  standalone: true,
8
  imports: [HotTableModule],
9
  template: `<div>
10
    <hot-table [data]="data" [settings]="gridSettings"></hot-table>
11
  </div>`,
12
})
13
export class AppComponent {
14
  readonly data = [
15
    { id: 1, name: { first: 'Chris', last: 'Right' }, password: 'plainTextPassword' },
16
    { id: 2, name: { first: 'John', last: 'Honest' }, password: 'txt' },
17
    { id: 3, name: { first: 'Greg', last: 'Well' }, password: 'longer' },
18
  ];
19

20
  readonly gridSettings: GridSettings = {
21
    colHeaders: ['ID', 'First name', 'Last name', 'Password'],
22
    height: 'auto',
23
    autoWrapRow: true,
24
    autoWrapCol: true,
25
    columns: [
26
      { data: 'id' },
27
      { data: 'name.first' },
28
      { data: 'name.last' },
29
      { data: 'password', type: 'password', hashRevealDelay: 1000 },
30
    ],
31
  };
32
}
33
/* end-file */
34

35
/* file: app.config.ts */
36
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
37
import { registerAllModules } from 'handsontable/registry';
38
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
39

40
// register Handsontable's modules
41
registerAllModules();
42

43
export const appConfig: ApplicationConfig = {
44
  providers: [
45
    provideZoneChangeDetection({ eventCoalescing: true }),
46
    {
47
      provide: HOT_GLOBAL_CONFIG,
48
      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,
49
    },
50
  ],
51
};
52
/* end-file */

1
<div>
2
  <example4-password-cell-type></example4-password-cell-type>
3
</div>

Result

After configuring the password cell type, cells display asterisks instead of the actual value. The editor uses an <input type="password"> field (or <input type="text"> when hashRevealDelay is set). The actual data is stored in plain text in the data source and is not encrypted by Handsontable.

Related guides

Cell type

Configuration options

Core methods