Skip to content
Handsontable dev

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.

JavaScript
import { HotTable } from '@handsontable/react-wrapper';
import { registerAllModules } from 'handsontable/registry';


// register Handsontable's modules
registerAllModules();


const ExampleComponent = () => {
  return (
    <HotTable
      data={[
        {
          id: 1,
          name: { first: 'Chris', last: 'Right' },
          password: 'plainTextPassword',
        },
        { id: 2, name: { first: 'John', last: 'Honest' }, password: 'txt' },
        { id: 3, name: { first: 'Greg', last: 'Well' }, password: 'longer' },
      ]}
      colHeaders={['ID', 'First name', 'Last name', 'Password']}
      height="auto"
      autoWrapRow={true}
      autoWrapCol={true}
      licenseKey="non-commercial-and-evaluation"
      columns={[{ data: 'id' }, { data: 'name.first' }, { data: 'name.last' }, { data: 'password', type: 'password' }]}
    />
  );
};


export default ExampleComponent;
TypeScript
import { HotTable } from '@handsontable/react-wrapper';
import { registerAllModules } from 'handsontable/registry';


// register Handsontable's modules
registerAllModules();


const ExampleComponent = () => {
  return (
    <HotTable
      data={[
        {
          id: 1,
          name: { first: 'Chris', last: 'Right' },
          password: 'plainTextPassword',
        },
        { id: 2, name: { first: 'John', last: 'Honest' }, password: 'txt' },
        { id: 3, name: { first: 'Greg', last: 'Well' }, password: 'longer' },
      ]}
      colHeaders={['ID', 'First name', 'Last name', 'Password']}
      height="auto"
      autoWrapRow={true}
      autoWrapCol={true}
      licenseKey="non-commercial-and-evaluation"
      columns={[{ data: 'id' }, { data: 'name.first' }, { data: 'name.last' }, { data: 'password', type: 'password' }]}
    />
  );
};


export default ExampleComponent;

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.

JavaScript
import { HotTable } from '@handsontable/react-wrapper';
import { registerAllModules } from 'handsontable/registry';


// register Handsontable's modules
registerAllModules();


const ExampleComponent = () => {
  return (
    <HotTable
      data={[
        {
          id: 1,
          name: { first: 'Chris', last: 'Right' },
          password: 'plainTextPassword',
        },
        { id: 2, name: { first: 'John', last: 'Honest' }, password: 'txt' },
        { id: 3, name: { first: 'Greg', last: 'Well' }, password: 'longer' },
      ]}
      colHeaders={['ID', 'First name', 'Last name', 'Password']}
      height="auto"
      autoWrapRow={true}
      autoWrapCol={true}
      licenseKey="non-commercial-and-evaluation"
      columns={[
        { data: 'id' },
        { data: 'name.first' },
        { data: 'name.last' },
        { data: 'password', type: 'password', hashLength: 10 },
      ]}
    />
  );
};


export default ExampleComponent;
TypeScript
import { HotTable } from '@handsontable/react-wrapper';
import { registerAllModules } from 'handsontable/registry';


// register Handsontable's modules
registerAllModules();


const ExampleComponent = () => {
  return (
    <HotTable
      data={[
        {
          id: 1,
          name: { first: 'Chris', last: 'Right' },
          password: 'plainTextPassword',
        },
        { id: 2, name: { first: 'John', last: 'Honest' }, password: 'txt' },
        { id: 3, name: { first: 'Greg', last: 'Well' }, password: 'longer' },
      ]}
      colHeaders={['ID', 'First name', 'Last name', 'Password']}
      height="auto"
      autoWrapRow={true}
      autoWrapCol={true}
      licenseKey="non-commercial-and-evaluation"
      columns={[
        { data: 'id' },
        { data: 'name.first' },
        { data: 'name.last' },
        { data: 'password', type: 'password', hashLength: 10 },
      ]}
    />
  );
};


export default ExampleComponent;

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.

JavaScript
import { HotTable } from '@handsontable/react-wrapper';
import { registerAllModules } from 'handsontable/registry';


// register Handsontable's modules
registerAllModules();


const ExampleComponent = () => {
  return (
    <HotTable
      data={[
        {
          id: 1,
          name: { first: 'Chris', last: 'Right' },
          password: 'plainTextPassword',
        },
        { id: 2, name: { first: 'John', last: 'Honest' }, password: 'txt' },
        { id: 3, name: { first: 'Greg', last: 'Well' }, password: 'longer' },
      ]}
      colHeaders={['ID', 'First name', 'Last name', 'Password']}
      height="auto"
      autoWrapRow={true}
      autoWrapCol={true}
      licenseKey="non-commercial-and-evaluation"
      columns={[
        { data: 'id' },
        { data: 'name.first' },
        { data: 'name.last' },
        { data: 'password', type: 'password', hashSymbol: '&#9632;' },
      ]}
    />
  );
};


export default ExampleComponent;
TypeScript
import { HotTable } from '@handsontable/react-wrapper';
import { registerAllModules } from 'handsontable/registry';


// register Handsontable's modules
registerAllModules();


const ExampleComponent = () => {
  return (
    <HotTable
      data={[
        {
          id: 1,
          name: { first: 'Chris', last: 'Right' },
          password: 'plainTextPassword',
        },
        { id: 2, name: { first: 'John', last: 'Honest' }, password: 'txt' },
        { id: 3, name: { first: 'Greg', last: 'Well' }, password: 'longer' },
      ]}
      colHeaders={['ID', 'First name', 'Last name', 'Password']}
      height="auto"
      autoWrapRow={true}
      autoWrapCol={true}
      licenseKey="non-commercial-and-evaluation"
      columns={[
        { data: 'id' },
        { data: 'name.first' },
        { data: 'name.last' },
        { data: 'password', type: 'password', hashSymbol: '&#9632;' },
      ]}
    />
  );
};


export default ExampleComponent;

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.

JavaScript
import { HotTable } from '@handsontable/react-wrapper';
import { registerAllModules } from 'handsontable/registry';


// register Handsontable's modules
registerAllModules();


const ExampleComponent = () => {
  return (
    <HotTable
      data={[
        { id: 1, name: { first: 'Chris', last: 'Right' }, password: 'plainTextPassword' },
        { id: 2, name: { first: 'John', last: 'Honest' }, password: 'txt' },
        { id: 3, name: { first: 'Greg', last: 'Well' }, password: 'longer' },
      ]}
      colHeaders={['ID', 'First name', 'Last name', 'Password']}
      height="auto"
      autoWrapRow={true}
      autoWrapCol={true}
      licenseKey="non-commercial-and-evaluation"
      columns={[
        { data: 'id' },
        { data: 'name.first' },
        { data: 'name.last' },
        { data: 'password', type: 'password', hashRevealDelay: 1000 },
      ]}
    />
  );
};


export default ExampleComponent;
TypeScript
import { HotTable } from '@handsontable/react-wrapper';
import { registerAllModules } from 'handsontable/registry';


// register Handsontable's modules
registerAllModules();


const ExampleComponent = () => {
  return (
    <HotTable
      data={[
        { id: 1, name: { first: 'Chris', last: 'Right' }, password: 'plainTextPassword' },
        { id: 2, name: { first: 'John', last: 'Honest' }, password: 'txt' },
        { id: 3, name: { first: 'Greg', last: 'Well' }, password: 'longer' },
      ]}
      colHeaders={['ID', 'First name', 'Last name', 'Password']}
      height="auto"
      autoWrapRow={true}
      autoWrapCol={true}
      licenseKey="non-commercial-and-evaluation"
      columns={[
        { data: 'id' },
        { data: 'name.first' },
        { data: 'name.last' },
        { data: 'password', type: 'password', hashRevealDelay: 1000 },
      ]}
    />
  );
};


export default ExampleComponent;

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

type
hashLength
hashRevealDelay
hashSymbol

Core methods

getCellMeta()
getCellMetaAtRow()
getCellsMeta()
getDataType()
setCellMeta()
setCellMetaObject()
removeCellMeta()

Hooks

afterGetCellMeta
afterSetCellMeta
beforeGetCellMeta
beforeSetCellMeta