--- title: "Editing | Features" description: "ZingGrid has built-in features that makes your grid easy to edit." url: https://www.zinggrid.com/docs/features/editing --- ```text experiment_id: web-retrieval-v1 fixture_id: /docs/features/editing.md mode: provenance representation: markdown origin_response_id: 738afa8501220584476f4e101c033ee6 version: 2026-10-21 version_created_at_utc: 2026-10-21T20:42:35.685Z version_nonce: a0befa2c1d9000c042b993ad499113b3 generated_at_utc: 2026-11-06T20:29:41.326Z response_nonce: 0f0b41fef7f834176873283ef823d30c ``` # Editing ZingGrid's many built-in features includes easy in-cell editing. ## Default Editor Enable editing on the grid by adding the `[editor]` attribute to the `` tag. Once this is done, simply double-click any cell to make changes. > **Note:** The grid comes built-in with a validator based on the column type. Editing a column with `[type="url"]` and a `[type-url-src]` attribute can get tricky because the grid will expect a valid url input. To prevent this validation error from occurring, add `[validation="string"]` or any `[type]` to the `` tag. This will change the validation method for the ``. ### Default Editor Grid Here is a complete grid with the default editor enabled: [Example code](https://app.zingsoft.com/demos/embed/BVS12UUQ) ## Editing Rows To display static controls for editing and deleting rows, add the `[editor-controls]` attribute to the `` tag, like so: ```html ``` The `e[ditor-controls]` feature adds a "Create Row" button above the header cells and appends two columns for editing and removing rows. This attribute also enables cell editing. To disable cell editing, set `[cell-editor]` to "disabled". ### Static Row Edit Controls Grid Here is a complete grid with buttons to edit and delete rows: [Example code](https://app.zingsoft.com/demos/embed/THYDQ2MB) ## Modal Editor Enable the modal (overlay) editor by adding `[editor="modal"]` to the `` tag, like so: ```html ``` > **Note:** By default, the 'modal' editor is automatically enabled for `[viewport="mobile"]` device widths or when the grid is in card layout (`[layout="card"]`). ### Modal Editor Grid Here is a complete grid where double-clicking on a cell will activate a modal for editing: [Example code](https://app.zingsoft.com/demos/embed/WSEVS1CD) ## Card Mode Editor By default, card mode (`[layout="card"]`) uses the modal editor, equivalent to setting `[editor="modal"]` on the `` tag. Inline editing is also supported in card mode by setting `[editor="inline"]` instead. ### Card Mode Inline Editor Grid Here is a complete grid in card mode with inline editing enabled: [Example code](https://app.zingsoft.com/demos/embed/F0RZL0JL) ## Custom Editor via RegisterEditor() Instead of using the default grid editor, you can create your own. Create a custom editor field by registering a custom editor object with `registerEditor()` method, like so: ```javascript let editor = { init($cell, editorField) {}, onOpen($cell, editorField, mData) {}, onClose(editorField) {}, }; ZingGrid.registerEditor(editor, 'customEditorName'); ``` After, you can use it in the grid by setting `[editor]` to the name of the custom editor. ### RegisterEditor() Grid The create a custom editor, create an editor config object that defines the editor lifecycle hooks: `init()`, `onOpen()` and `onClose()`. The life cycle hook functions fire when the editor is opened and closed. The `init($cell, editorField)` function is used to create and setup the `` field(s) within the `editorField`. Any other additional editing-related tools should be placed in `editorField`. The `editorField` is the element that appears when opening the editor that serves as a wrapper for the `` field and any other editing tools you place. Clicking outside of `editorField` will trigger the editor to close and submit. The `onOpen($cell, editorField, mData)` sets the value of the `` fields. Lastly, we have the `onClose(editorField)` to record the value. [Example code](https://app.zingsoft.com/demos/embed/AKZ56TZW) ## Custom Editor via RegisterCellType() There may be a case where you want to have a column that customizes both the cell editor and renderer. This would require setting `[editor]` and `[renderer]` to the methods registered with `registerEditor()` and `registerMethod()`, respectively. This can be shortcut by registering both the editor and renderer through `registerCellType()` as a custom cell type. This custom cell type can then be set to a column's `[type]` attribute. ```javascript // renderer function for cell function nameRenderer(first, last, cellRef, $cell) { return first.toUpperCase() + ' ' + last.toUpperCase(); } // custom editor for cell let editor = { init($cell, editorField) {}, onOpen($cell, editorField, mData) {}, onClose(editorField) {}, }; // register new cell type ZingGrid.registerCellType('fullName', { renderer: nameRenderer, editor, }); ``` ### RegisterCellType() Grid Check out the section above on creating a custom editor. The key difference between `registerEditor()` and `registerCellType()`, is that `registerCellType()` also registers a renderer for the column. This is useful for columns that multiple `[index]` values. In our example below, the "name" column contains both "first" and "last" indices. [Example code](https://app.zingsoft.com/demos/embed/6XTGNXF8) ## Custom Editor via Editor Template There are multiple ways to create a custom editor. Other than creating one through an editor config object, you could also set up an HTML template for the editor modal. This approach does not create a custom editor for inline cell or row editing. Use the `setEditor()` approach for that instead. ```html // Enable model editing and set the editor template on a column ... // HTML template for editor modal ``` ### Editor Template Grid To specify an editor template, set `[editor-template]` to the `[id]` of a `