---
title: "ZingGrid Web Component: `<zg-editor-row>` | Docs"
description: "View our in depth tutorial covering the web component `<zg-editor-row>` tag and the associated features for the JavaScript grid."
url: https://www.zinggrid.com/docs/api/tags/zg-editor-row
---

```text
experiment_id: web-retrieval-v1
fixture_id: /docs/api/tags/zg-editor-row.md
mode: provenance
representation: markdown
origin_response_id: b81e4df36a4a611a686dc6f08adaef1c
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.628Z
version_nonce: dd38a39b1cec95dc6846664e9cdc3fcc
generated_at_utc: 2026-11-03T02:25:33.352Z
response_nonce: 4fe6cbd1a87404ee8800b2dcf7483c31
```

# `<zg-editor-row>`

[Interactive Storybook Playground](https://storybook.zinggrid.com/?path=/docs/components-zg-editor-row--docs)

The `<zg-editor-row>` tag is a web component that holds the details of the edit mode for the grid. `<zg-editor-row>` is created implicitly by the grid and should be placed directly in the user's HTML. The element can inherently be styled through CSS variables or by targeting the tag directly.

![Image of the DOM relationship for the zg-editor web component tag](https://storage.googleapis.com/zinggrid-pwa.appspot.com/components/v2/zg-editor-row-web-component-dom.png "Image of the DOM relationship for the zg-editor web component tag")

| Component | Relationship | Type | Ancestor |
| --- | --- | --- | --- |
| [ZGTable](https://www.zinggrid.com/docs/api/tags/zg-table) | Parent | Generated | n/a |

#### Related Web Components

- [`<zing-grid>`](https://www.zinggrid.com/docs/api/tags/zing-grid/)
- [`<zg-column>`](https://www.zinggrid.com/docs/api/tags/zg-column/)

## Attributes

There are no attributes available for the `<zg-editor-row>` web component.

## CSS Variables
`<zg-editor-row>` can be styled with CSS variables, like so:

```css
:root {
--zg-editor-row-input-color: red;
}
```

Below is a list of all the associated `--zg-editor-row` CSS variables. Check out the [full list of CSS variables](https://www.zinggrid.com/docs/api/css-variables/reference/) or our [Styling Basics guide](https://www.zinggrid.com/docs/getting-started/styling-basics/) to learn more about styling the grid.

| Name | Default | Description | Demo |
| --- | --- | --- | --- |
| `--zg-editor-row-input-background` | #f5f5f5 | Styles the background of editor row | [Example code](https://app.zingsoft.com/demos/embed/3EBBN3A3) |
| `--zg-editor-row-input-background_focus` | var(--theme-color-lighter) | Styles the background of editor row input on focus | [Example code](https://app.zingsoft.com/demos/embed/TUH8OZBD) |
| `--zg-editor-row-input-border` | 1px solid rgba(82, 168, 236, 0.8) | Styles the border of editor row | [Example code](https://app.zingsoft.com/demos/embed/O48B8R6Z) |
| `--zg-editor-row-input-border-bottom` | var(--zg-editor-row-input-border, 1px solid rgba(82, 168, 236, 0.8)) | Styles the bottom border of editor row | [Example code](https://app.zingsoft.com/demos/embed/9P6CXB0Q) |
| `--zg-editor-row-input-border-left` | var(--zg-editor-row-input-border, 0) | Styles the left border of editor row | [Example code](https://app.zingsoft.com/demos/embed/VF347SF8) |
| `--zg-editor-row-input-border-right` | var(--zg-editor-row-input-border, 0) | Styles the right border of editor row | [Example code](https://app.zingsoft.com/demos/embed/8OAHGLVE) |
| `--zg-editor-row-input-border-top` | var(--zg-editor-row-input-border, 0) | Styles the top border of editor row | [Example code](https://app.zingsoft.com/demos/embed/MA8A06J7) |
| `--zg-editor-row-input-box-shadow_focus` | inset 0 0 5px #ccc | Applies a box shadow behind editor row input on focus | [Example code](https://app.zingsoft.com/demos/embed/NAS5WQHN) |
| `--zg-editor-row-input-color` | var(--zg-editor-row-input-color, #fff) | Sets the font color of editor row | [Example code](https://app.zingsoft.com/demos/embed/QYZBZUVA) |
| `--zg-editor-row-input-padding` | 12px 15px | Sets the padding of editor row | [Example code](https://app.zingsoft.com/demos/embed/9Q07P5B1) |

## CSS Selector

`<zg-editor-row>` can be styled by common CSS selectors, like so:

```css
zg-editor-row {
  border: 1px solid red;
}
```

## CSS Shadow Parts

`<zg-editor-row>` exposed elements within the shadow can be styled by CSS shadow parts, like so:

```css
zg-editor-row::part(editor-row) {
  background-color: red;
}
```

Below is a list of all the associated ZGEditorRow shadow parts. Check out the [full list of CSS shadow parts](https://www.zinggrid.com/docs/api/styling/css-shadow-parts) or our [Styling Basics guide](https://www.zinggrid.com/docs/getting-started/styling-basics/) to learn more about styling the grid.

| Name | Description |
| --- | --- |
| `editor-row` | Editor-row container. |
| `inputs` | Container for the input fields |

## Slots

There are no slots available for the `<zg-editor-row>` web component.