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 devloper. 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 <zg-row> web component.

CSS Variables

All the associated --zg-row CSS variables. You can find the full list of css variables or check out our styling basics to learn more about styling the grid.

root: {
  --zg-row-background: red;
}
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-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.

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