The <zg-column-resize> tag is a web component that serves as a handle for resizing a column and used as a CSS target for styling by the developer. The <zg-column-resize> web component should not be accessed specifically beyond styling.

Image of the DOM relationship for the zg-column-resize web component tag

Related Web Components


The <zg-column-resize> element is a generated element added to <zg-head-cell> when the column-resizable attribute is defined.



There are no attributes available for the <zg-column-resize> web component.

CSS Variables

<zg-column-resize> can be styled with CSS variables, like so:

:root {
  --zg-column-resize-background: red;

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

ZGColumnResize CSS Variables and Default Values
NameDefaultDescriptionDemoCSS Ref
--zg-column-resize-backgroundnoneSets the background of the resize handle
--zg-column-resize-height40%Sets the height of the resize handle
--zg-column-resize-top30%Sets the top position of the resize handle
--zg-column-resize-width4pxSets the width of the resize handle

CSS Selector

<zg-column-resize> can be styled by common CSS selectors, like so:

zg-column-resize {
  background: red;


There are no slots available for the <zg-column-resize> web component.

[api: <zg-column-resize>]