JavaScript Data Grid Password cell type

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

In this article

• Overview
• Fixed hash length
• Custom hash symbol
• Related articles
  • Related guides
  • Related API reference

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.

import Handsontable from 'handsontable'; import 'handsontable/dist/handsontable.full.min.css'; const container = document.querySelector('#example1'); const hot = new Handsontable(container, { 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', licenseKey: 'non-commercial-and-evaluation', columns: [ { data: 'id' }, { data: 'name.first' }, { data: 'name.last' }, { data: 'password', type: 'password' } ] }); <script src="https://cdn.jsdelivr.net/npm/handsontable@13.0/dist/handsontable.full.min.js"></script> <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@13.0/dist/handsontable.full.min.css" /> <script src="https://handsontable.com/docs/13.0/scripts/fixer.js"></script> <div id="example1" class="hot "></div>

import Handsontable from 'handsontable';
import 'handsontable/dist/handsontable.full.min.css';

const container = document.querySelector('#example1');
const hot = new Handsontable(container, {
  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',
  licenseKey: 'non-commercial-and-evaluation',
  columns: [
    { data: 'id' },
    { data: 'name.first' },
    { data: 'name.last' },
    { data: 'password', type: 'password' }
  ]
});

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.

import Handsontable from 'handsontable'; import 'handsontable/dist/handsontable.full.min.css'; const container = document.querySelector('#example2'); const hot = new Handsontable(container, { 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', licenseKey: 'non-commercial-and-evaluation', columns: [ { data: 'id' }, { data: 'name.first' }, { data: 'name.last' }, { data: 'password', type: 'password', hashLength: 10 } ] }); <script src="https://cdn.jsdelivr.net/npm/handsontable@13.0/dist/handsontable.full.min.js"></script> <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@13.0/dist/handsontable.full.min.css" /> <script src="https://handsontable.com/docs/13.0/scripts/fixer.js"></script> <div id="example2" class="hot "></div>

import Handsontable from 'handsontable';
import 'handsontable/dist/handsontable.full.min.css';

const container = document.querySelector('#example2');
const hot = new Handsontable(container, {
  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',
  licenseKey: 'non-commercial-and-evaluation',
  columns: [
    { data: 'id' },
    { data: 'name.first' },
    { data: 'name.last' },
    { data: 'password', type: 'password', hashLength: 10 }
  ]
});

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.

import Handsontable from 'handsontable'; import 'handsontable/dist/handsontable.full.min.css'; const container = document.querySelector('#example3'); const hot = new Handsontable(container, { 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', licenseKey: 'non-commercial-and-evaluation', columns: [ { data: 'id' }, { data: 'name.first' }, { data: 'name.last' }, { data: 'password', type: 'password', hashSymbol: '■' } ] }); <script src="https://cdn.jsdelivr.net/npm/handsontable@13.0/dist/handsontable.full.min.js"></script> <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@13.0/dist/handsontable.full.min.css" /> <script src="https://handsontable.com/docs/13.0/scripts/fixer.js"></script> <div id="example3" class="hot "></div>

import Handsontable from 'handsontable';
import 'handsontable/dist/handsontable.full.min.css';

const container = document.querySelector('#example3');
const hot = new Handsontable(container, {
  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',
  licenseKey: 'non-commercial-and-evaluation',
  columns: [
    { data: 'id' },
    { data: 'name.first' },
    { data: 'name.last' },
    { data: 'password', type: 'password', hashSymbol: '■' }
  ]
});

Related articles

Related guides

• Cell type

Related API reference

• Configuration options:
  • type
• Core methods:
  • getCellMeta()
  • getCellMetaAtRow()
  • getCellsMeta()
  • getDataType()
  • setCellMeta()
  • setCellMetaObject()
  • removeCellMeta()
• Hooks:
  • afterGetCellMeta
  • afterSetCellMeta
  • beforeGetCellMeta
  • beforeSetCellMeta