<zg-row>

The <zg-row> tag is a web component that is the container for the <zg-cell>, <zg-head-cell>, and <zg-filter> elements. It corresponds to the <tr> tag on an HTML table. The <zg-row> element is created dynamically and should not be placed in the grid by a developer. However, the element is useful for styling and can be targeted by CSS variables and CSS selectors.

Image of the DOM relationship for the zg-row web component tag

Related Web Components

Attributes

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

CSS Variables

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

:root {
  --zg-row-background: red;
}

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

ZGCell CSS Variables and Default Values
NameDefaultDescriptionDemoCSS Ref
--zg-cell-backgroundvar(--zg-cell-background)Styles the background of cells
--zg-cell-background_hoverBrowser's default valueStyles the background of cells on hover
--zg-cell-background_hover_layout_rowvar(--zg-cell-background_hover)Styles the background of cells in 'row' layout-mode on hover
--zg-cell-background_layout_rowvar(--zg-cell-background)Styles the background of cells in 'row' layout-mode
--zg-cell-background_layout_row_sortedvar(--zg-cell-background_sorted)Styles the background of cells in sorted column in 'row' layout-mode
--zg-cell-background_sortedBrowser's default valueStyles the background of cells in sorted column
--zg-cell-border0Styles the border of cells
--zg-cell-border-bottomvar(--zg-cell-border, 0)Styles the bottom border of cells
--zg-cell-border-bottom_layout_rowvar(--zg-cell-border_layout_row, var(--zg-cell-border-bottom, var(--zg-cell-border, 0)))Styles the bottom border of cells in 'row' layout-mode
--zg-cell-border-leftvar(--zg-cell-border, 0)Styles the left border of cells
--zg-cell-border-left_layout_rowvar(--zg-cell-border_layout_row, var(--zg-cell-border-left, var(--zg-cell-border, 0)))Styles the left border of cells in 'row' layout-mode
--zg-cell-border-rightvar(--zg-cell-border, 0)Styles the right border of cells
--zg-cell-border-right_layout_rowvar(--zg-cell-border_layout_row, var(--zg-cell-border-right, var(--zg-cell-border, 0)))Styles the right border of cells in 'row' layout-mode
--zg-cell-border-topvar(--zg-cell-border, 0)Styles the top border of cells
--zg-cell-border-top_layout_rowvar(--zg-cell-border_layout_row, var(--zg-cell-border-top, var(--zg-cell-border, 0)))Styles the top border of cells in 'row' layout-mode
--zg-cell-border_layout_rowvar(--zg-cell-border-bottom, var(--zg-cell-border, 0))Styles the border of cells in 'row' layout-mode
--zg-cell-colorinheritStyles font color of text in cells
--zg-cell-color_hovervar(--zg-cell-color)Styles font color of cells on hover
--zg-cell-color_hover_layout_rowvar(--zg-cell-color_hover, var(--zg-cell-color))Styles font color of cells in 'row' layout-mode on hover
--zg-cell-color_layout_rowvar(--zg-cell-color, inherit)Styles font color of text in cells in 'row' layout-mode
--zg-cell-color_layout_row_sortedvar(--zg-cell-color_sorted, var(--zg-cell-color))Sets the font color of cells in sorted column in 'row' layout-mode
--zg-cell-color_sortedvar(--zg-cell-color)Sets the font color of cells in sorted column
--zg-cell-content-border-bottom_layout_cardvar(--zg-cell-content-border_layout_card, 0)Styles the bottom border of card items in 'card' layout-mode
--zg-cell-content-border-left_layout_cardvar(--zg-cell-content-border_layout_card, 0)Styles the left border of card items in 'card' layout-mode
--zg-cell-content-border-right_layout_cardvar(--zg-cell-content-border_layout_card, 0)Styles the right border of card items in 'card' layout-mode
--zg-cell-content-border-top_layout_cardvar(--zg-cell-content-border_layout_card, 0)Styles the top border of card items in 'card' layout-mode
--zg-cell-content-border_layout_card0Styles the border of card items in 'card' layout-mode
--zg-cell-content-font-size_layout_cardinheritSets the font size of cards in 'card' layout-mode
--zg-cell-content-padding_layout_card3px 0Sets the padding of cards in 'card' layout-mode
--zg-cell-dirty-edit-border-colorred;Sets the color of the dirty cell marker
--zg-cell-dirty-edit-border-width7pxSets the border width of the dirty cell marker
--zg-cell-font-familyinheritSets the font family in cells
--zg-cell-font-family_layout_rowvar(--zg-cell-font-family, inherit)Sets the font family in cells in 'row' layout-mode
--zg-cell-font-sizeinheritSets the font size in cells
--zg-cell-font-size_layout_rowvar(--zg-cell-font-size, inherit)Sets the font size in cells in 'row' layout-mode
--zg-cell-font-styleinheritSets the font style in cells
--zg-cell-font-style_layout_rowvar(--zg-cell-font-style, inherit)Sets the font style in cells in 'row' layout-mode
--zg-cell-font-weightinheritSets the font weight in cells
--zg-cell-font-weight_layout_rowvar(--zg-cell-font-weight, inherit)Sets the font weight in cells in 'row' layout-mode
--zg-cell-heightautoSets height of cells
--zg-cell-height_layout_rowvar(--zg-cell-height, auto)Sets height of cells in 'row' layout-mode
--zg-cell-label-color_layout_cardvar(--theme-color-primary)Sets font color of label in cards in 'card' layout-mode
--zg-cell-label-display_layout_cardflexSets the display of label in cards in 'card' layout-mode
--zg-cell-label-font-size_layout_card85%Sets font size of label in cards in 'card' layout-mode
--zg-cell-label-font-weight_layout_cardBrowser's default valueSets font weight of label in cards in 'card' layout-mode
--zg-cell-label-margin_layout_card0 0 2pxSets the margin of label in cards in 'card' layout-mode
--zg-cell-label-overflow_layout_cardBrowser's default valueSets the overflow of label in cards in 'card' layout-mode
--zg-cell-label-transform_layout_cardBrowser's default valueSets transform of label in cards in 'card' layout-mode
--zg-cell-line-heightinheritSets line height of cells
--zg-cell-line-height_layout_rowvar(--zg-cell-line-height, inherit)Sets line height of cells in 'row' layout-mode
--zg-cell-paddingvar(--theme-padding_y) var(--theme-padding_x)Sets padding of cells
--zg-cell-padding_layout_rowvar(--zg-cell-padding, var(--theme-padding_y) var(--theme-padding_x))Sets padding of cells in 'row' layout-mode
--zg-cell-transitionBrowser's default valueSets the transition of cells
--zg-cell-transition_layout_rowvar(--zg-cell-transition)Sets the transition of cells in 'row' layout-mode
--zg-cell-vertical-alignmiddleSets vertical alignment of items in cells
--zg-cell-vertical-align_layout_rowvar(--zg-cell-vertical-align, middle)Sets vertical alignment of items in cells in 'row' layout-mode

CSS Selector

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

zg-row {
  font-size: 2rem;
}

Slots

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

[api: <zg-row>]