Skip to content
Handsontable dev

Password cell type

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

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;

Related guides

Cell type

Configuration options

type

Core methods

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

Hooks

afterGetCellMeta
afterSetCellMeta
beforeGetCellMeta
beforeSetCellMeta