Interactive Storybook Playground

The <zg-batch-edit> tag is a web component that is used to outline editable cells in batch edit mode and used as a CSS target for styling by the developer. The <zg-batch-edit> web component should not be accessed specifically beyond styling.

Image of the DOM relationship for the zg-batch-edit web component tag

Related Web Components


The <zg-batch-edit> element is a generated element added to <zg-control-bar> when the batch-edit attribute is defined.



There are no attributes available for the <zg-batch-edit> web component.

CSS Variables

<zg-batch-edit> can be styled with CSS variables, like so:

:root {
  --zing-grid-batch-edit-style-border: 1px solid red;

Below is a list of all the associated <zg-batch-edit> CSS variables. Check out the full list of CSS variables or our Styling Basics guide to learn more about styling the grid.

ZGBatchEdit CSS Variables and Default Values
NameDefaultDescriptionDemoCSS Ref

CSS Selector

<zg-batch-edit> can be styled by common CSS selectors, like so:

zg-batch-edit {
  border: 1px solid red;
  box-shadow: inset 0 0 6px red;


There are no slots available for the <zg-batch-edit> web component.

[api: <zg-batch-edit>]