Skip to content
ZenGrid

Number Editor

Community

Introduction

Section titled “Introduction”

ZenGrid edits numbers in two layers:

  • Built-in number editor (Community). Set editor: 'number' on an editable column for a native <input type="number"> with spinner arrows. Configure it declaratively through editorOptions — min, max, step, precision, allowNegative, placeholder, and a custom validator. No license needed.
  • Formatted number editor (Enterprise). numberEditor() returns a ready-made column backed by a premium editor that live-formats as you type — thousands grouping, a currency prefix ($1,234), a unit suffix (12.5%), fixed decimals, and optional −/+ stepper buttons. It formats the cell’s display with the same options, so a currency column reads and edits identically.

Built-in number editor (Community)

Section titled “Built-in number editor (Community)”

Select it on any editable column:

const grid = new Zengrid(mount, {
  columns: [
    { field: 'mrr', header: 'MRR', editable: true, editor: 'number',
      editorOptions: { min: 0, max: 50000, step: 100 } },
  ],
});

editorOptions

Section titled “editorOptions”
Option Type Purpose
min number Reject values below this on commit.
max number Reject values above this on commit.
step number Spinner arrow / Arrow-key increment (default 1).
precision number Round the committed value to this many decimals.
allowNegative boolean Reject negatives when false (default true).
placeholder string Placeholder shown when empty.
validator (value: number) => boolean | string Custom check run after min/max; return a string to supply the error message.

A failing min / max / validator commit is governed by the grid-level editing.invalidEditMode: 'block' (default) keeps the editor open and flags the cell.

MRR uses editor:'number' with min:0, max:50000 and step:250. Double-click a MRR cell — use the spinner arrows or type a value, then Enter to commit. Change step to 1000 or set placeholder and re-run.

Formatted number editor (Enterprise)

Section titled “Formatted number editor (Enterprise)”
Enterprise

numberEditor() returns a ColumnDef — drop it straight into columns. It wires the premium NumberFormatEditor and, by default, formats the cell display with the same options so reading and editing match:

import { numberEditor } from '@zengrid/enterprise';


const grid = new Zengrid(mount, {
  columns: [
    numberEditor({ field: 'revenue', header: 'Revenue',
      prefix: '$', thousandSeparator: true, precision: 0, min: 0 }),
  ],
});

Options

Section titled “Options”

Everything from the built-in editor (min/max/step/precision/ allowNegative/placeholder/validator) plus formatting:

Option Type Purpose
prefix string Text before the number, e.g. '$'.
suffix string Text after the number, e.g. '%' or ' kg'.
thousandSeparator boolean | string Group the integer part (true = ',', or a custom char).
decimalSeparator string Decimal point character (default '.').
stepper boolean Render −/+ buttons beside the input (Arrow keys work too).
selectAllOnFocus boolean Select the value when the editor opens (default true).
formatDisplay boolean Also format the cell display (default true; false keeps your own renderer).

Revenue is a numberEditor with prefix:'$', thousandSeparator:true, precision:0. Cells read '$1,234,000'; double-click one and type digits — the grouping and $ appear live as you type. It stores the raw number.

Next

Section titled “Next”