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.
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@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://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@13.0/dist/react-handsontable.min.js"></script>
<script src="https://handsontable.com/docs/13.0/scripts/fixer.js"></script>
<div id="example2" class="hot "></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.
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@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://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@13.0/dist/react-handsontable.min.js"></script>
<script src="https://handsontable.com/docs/13.0/scripts/fixer.js"></script>
<div id="example3" class="hot "></div>
Related articles Configuration options:
Core methods:
Hooks: