Parsing Values

Community

Introduction

An editor gives you back whatever the user typed — almost always a string. But your row usually wants something else: a number, an uppercased code, a trimmed name, an id looked up from a label. A column’s valueParser sits in the middle of the commit and turns the one into the other:

const grid = new Zengrid(mount, {
  columns: [
    {
      field: 'revenue',
      editable: true,
      editor: 'text',
      // "£1,250" (or "1,250", or "1250") → the number 1250
      valueParser: ({ newValue }) =>
        Number(String(newValue).replace(/[^0-9.-]/g, '')),
      renderer: currency,
    },
  ],
});

It runs once per commit, after validation passes and before the value is stored. Whatever it returns becomes the new cell value — and the newValue on the edit:commit event and the undo/redo history. Return oldValue to reject the edit and leave the cell untouched.

The parser params

valueParser is called with everything it needs to make the decision:

Field	What it is
newValue	The raw value the editor committed — usually the typed string.
oldValue	The cell’s value before the edit. Return it to reject.
row	The display row index.
field	This column’s field.
data	The whole source row, so you can parse against sibling cells.

Parsing is separate from validation (an editor rejecting bad input) and from saving (where the committed value goes). Parse to shape the value; see Validation to reject it up front and Saving Values for what happens after.

Try it live

Each tab parses a different way. Edit the code and commit an edit to watch the stored value differ from what you typed.

Parse numbersNormalise textClamp, reject & derive

CodeDemoSplit

ResetRun ⌘⏎

Both money columns use a plain text editor so you can type a formatted amount. valueParser strips everything but digits/sign/dot and returns a Number — type £1,250 or 1 250 into Revenue and it stores 1250, which the currency renderer redraws cleanly. Change the regex to keep decimals or reject NaN.

Next

• Saving Values — where the parsed value goes and how to intercept the write.
• Validation — reject bad input before it ever commits.
• Provided Cell Editors — the built-in editors and their options.