Formatted input (phone numbers, business numbers)

Type into a fixed format: Korean phone numbers (010, 02, 1588), business registration numbers, card numbers, postal codes or your own pattern; dashes appear as you type.

Live demoFormatted input

Phone, business number and a custom pattern; raw values stored.

Code for this demo

import { createGrid, type ColumnDef, type Row } from '@freegridjs/core';
import { makeRows } from '../data';
import { button, separator, text, tr, type DemoContext } from '../ui';

export default function mount(ctx: DemoContext) {
  const h = (en: string, ko: string) => tr(ctx.lang, { en, ko });
  const data = makeRows(150).map((r, i) => ({ ...r, tel: `010-${1000 + (i * 37) % 9000}-${1000 + (i * 91) % 9000}`, office: i % 2 ? '02-555-1234' : '031-123-4567', bizNo: `${1000000000 + i * 12345}`, usPhone: '' }));
  const grid = createGrid(ctx.host, {
    columns: [
      { field: 'name', header: h('Name', '이름'), width: 140 },
      { field: 'tel', header: h('Mobile', '휴대폰'), width: 140, editable: true, editor: { type: 'mask', mask: 'phone' } },
      { field: 'office', header: h('Office', '사무실'), width: 140, editable: true, editor: { type: 'mask', mask: 'phone' } },
      { field: 'bizNo', header: h('Business no. (digits stored)', '사업자번호(숫자만 저장)'), width: 200, editable: true, editor: { type: 'mask', mask: 'bizNo', raw: true } },
      { field: 'usPhone', header: h('US phone (pattern)', '미국 번호(패턴)'), width: 160, editable: true, editor: { type: 'mask', mask: '(000) 000-0000' } },
    ],
    data, locale: ctx.lang, filterRow: true,
  });
  grid.on('cellValueChanged', e => ctx.log(`${e.colId} stored ${JSON.stringify(e.newValue)}`));
  text(ctx, h('Type digits into a phone cell: the dashes appear by themselves. In the filter row, 01012 finds 010-12…',
    '전화번호 칸에 숫자만 입력해 보세요. 하이픈이 저절로 들어갑니다. 필터 행에서 01012로 010-12…를 찾습니다.'));
  return grid;
}

editor: { type: 'mask', mask } keeps typed values in a fixed shape. The written parts (dashes, brackets, spaces) appear by themselves as people type, the caret stays after the character just typed, and a value that is not complete is refused.

Built-in formats

mask	Example	Notes
'phone'	010-1234-5678 · 02-123-4567 · 02-1234-5678 · 031-123-4567 · 1588-1234	Korean numbers: mobile, Seoul 02, area codes and 15xx–19xx numbers; the layout changes with the digits
'bizNo'	123-45-67890	Business registration number (10 digits)
'card'	1234-5678-9012-3456	Card number (16 digits)
'zip'	06236	Postal code (5 digits)

Your own pattern

Write the shape with 0 for a digit, a for a letter and * for a letter or digit; every other character is written for you.

const columns = [
  { field: 'tel', editable: true, editor: { type: 'mask', mask: 'phone' } },
  { field: 'bizNo', editable: true, editor: { type: 'mask', mask: 'bizNo', raw: true } },   // stores 1234567890
  { field: 'usPhone', editable: true, editor: { type: 'mask', mask: '(000) 000-0000' } },
  { field: 'plate', editable: true, editor: { type: 'mask', mask: '00a 0000' } },           // 12가 3456
  { field: 'code', editable: true, editor: { type: 'mask', mask: 'aa-***' } },              // AB-12C
];

Options

Name	Type	Description
`mask`	`'phone' \| 'bizNo' \| 'card' \| 'zip' \| string`	A built-in format or a pattern (0 digit, a letter, * either).
`raw`	`boolean`	Store only the typed characters (1234567890) instead of the formatted text. The cell still shows the formatted value.

Typing, paste, search and Excel

Characters that do not fit a slot (a letter where a digit goes) are ignored while typing.
Pasting 010 1234 5678, 01012345678 or 010-1234-5678 all store 010-1234-5678; incomplete values are skipped.
Filters and the quick search find the value with or without its dashes: 01012 finds 010-1234-5678.
Excel and CSV get the formatted text (with raw: true, the digits).
An empty cell is fine; use required: true to ask for a value.

Questions about this page

How do I format phone numbers while typing in a grid?

Use editor: { type: 'mask', mask: 'phone' }. 01012345678 becomes 010-1234-5678, 0212345678 becomes 02-1234-5678, and an unfinished number is refused.