React 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 { HotTable } from '@handsontable/react'; import { registerAllModules } from 'handsontable/registry'; import 'handsontable/dist/handsontable.full.min.css'; // register Handsontable's modules registerAllModules(); export 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" licenseKey="non-commercial-and-evaluation" columns={[ { data: 'id' }, { data: 'name.first' }, { data: 'name.last' }, { data: 'password', type: 'password' } ]} /> ); }; ReactDOM.render(<ExampleComponent />, document.getElementById('example1')); <script src="https://cdn.jsdelivr.net/npm/handsontable@12.4/dist/handsontable.full.min.js"></script> <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@12.4/dist/handsontable.full.min.css" /> <script src="https://cdn.jsdelivr.net/npm/react@17/umd/react.production.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/react-dom@17/umd/react-dom.production.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@handsontable/react@12.4/dist/react-handsontable.min.js"></script> <script src="https://handsontable.com/docs/12.4/scripts/fixer.js"></script> <div id="example1" class="hot "></div>

import { HotTable } from '@handsontable/react';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/dist/handsontable.full.min.css';

// register Handsontable's modules
registerAllModules();

export 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"
      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 { HotTable } from '@handsontable/react'; import { registerAllModules } from 'handsontable/registry'; import 'handsontable/dist/handsontable.full.min.css'; // register Handsontable's modules registerAllModules(); export 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" licenseKey="non-commercial-and-evaluation" columns={[ { data: 'id' }, { data: 'name.first' }, { data: 'name.last' }, { data: 'password', type: 'password', hashLength: 10 } ]} /> ); }; ReactDOM.render(<ExampleComponent />, document.getElementById('example2')); <script src="https://cdn.jsdelivr.net/npm/handsontable@12.4/dist/handsontable.full.min.js"></script> <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@12.4/dist/handsontable.full.min.css" /> <script src="https://cdn.jsdelivr.net/npm/react@17/umd/react.production.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/react-dom@17/umd/react-dom.production.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@handsontable/react@12.4/dist/react-handsontable.min.js"></script> <script src="https://handsontable.com/docs/12.4/scripts/fixer.js"></script> <div id="example2" class="hot "></div>

import { HotTable } from '@handsontable/react';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/dist/handsontable.full.min.css';

// register Handsontable's modules
registerAllModules();

export 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"
      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 { HotTable } from '@handsontable/react'; import { registerAllModules } from 'handsontable/registry'; import 'handsontable/dist/handsontable.full.min.css'; // register Handsontable's modules registerAllModules(); export 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" licenseKey="non-commercial-and-evaluation" columns={[ { data: 'id' }, { data: 'name.first' }, { data: 'name.last' }, { data: 'password', type: 'password', hashSymbol: '■' } ]} /> ); }; ReactDOM.render(<ExampleComponent />, document.getElementById('example3')); <script src="https://cdn.jsdelivr.net/npm/handsontable@12.4/dist/handsontable.full.min.js"></script> <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@12.4/dist/handsontable.full.min.css" /> <script src="https://cdn.jsdelivr.net/npm/react@17/umd/react.production.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/react-dom@17/umd/react-dom.production.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@handsontable/react@12.4/dist/react-handsontable.min.js"></script> <script src="https://handsontable.com/docs/12.4/scripts/fixer.js"></script> <div id="example3" class="hot "></div>

import { HotTable } from '@handsontable/react';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/dist/handsontable.full.min.css';

// register Handsontable's modules
registerAllModules();

export 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"
      licenseKey="non-commercial-and-evaluation"
      columns={[
        { data: 'id' },
        { data: 'name.first' },
        { data: 'name.last' },
        { data: 'password', type: 'password', hashSymbol: '&#9632;' }
      ]}
    />
  );
};

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