Skip to content
ZenGrid

Edit Components

Community

Introduction

Section titled “Introduction”

The built-in editors cover text, numbers, dates, checkboxes and selects. When you need something they don’t — a segmented picker, a stepper, an autocomplete, a colour swatch — you supply your own edit component by implementing the CellEditor interface and handing it to a column’s editor:

class MyEditor {
  init(container, value, params) { /* build your UI into `container` */ }
  getValue() { /* return the value to commit */ }
  focus() { /* focus your input */ }
  destroy() { /* clean up */ }
  isValid() { /* optional: return true | { valid, message } */ }
}


const grid = new Zengrid(mount, {
  columns: [
    { field: 'status', editable: true, editor: MyEditor },
  ],
});

The CellEditor interface

Section titled “The CellEditor interface”
Member Required Purpose
init(container, value, params) ✔ Render your editor into container. value is the cell’s current value.
getValue() ✔ Return the value to commit — read on Enter, Tab, or click-away.
focus() ✔ Move focus into your input when the editor opens.
destroy() ✔ Tear down listeners/DOM when the edit ends.
isValid() – Return true or { valid, message }; a failing value is blocked per editing.invalidEditMode.

params carries cell, column, rowData, options (your column’s editorOptions), onComplete(value, cancelled) (call it to commit/cancel yourself — a click-to-pick editor uses this), and registerPopup(el) for any floating UI you append to document.body so a click on it isn’t treated as click-away.

Class or instance

Section titled “Class or instance”
  • Class — editor: MyEditor. The grid constructs a fresh editor for every edit. This is the recommended form.
  • Instance — editor: new MyEditor({ … }). A single configured editor is reused across cells — handy for a stateless editor you want to pre-configure.

The grid drives the lifecycle for you: Enter/Tab or a click outside commits (reading getValue()), Escape cancels, and scrolling the cell away closes the editor. You only build the UI.

Try it live

Section titled “Try it live”

A custom editor with no text input at all: Status opens a row of buttons and clicking one commits via params.onComplete. Double-click a Status cell, then click Active / Trial / Churned. The option list comes from editorOptions.values.

Next

Section titled “Next”