<zg-row>

Interactive Storybook Playground

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

ZGRow Relationships
Component Relationship Type Ancestor
ZGBody Parent Generated n/a
ZGFoot Parent Generated n/a
ZGHead Parent Generated n/a
ZGCell Child Generated ZGBody , ZGFoot
ZGFilter Child Generated ZGHead
ZGHeadCell Child Generated ZGHead

Related Web Components

Attributes

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

Top

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
Name Default Description Demo CSS Ref
--zg-cell-background var(--zg-cell-background) Styles the background of cells
--zg-cell-background_hover Browser's default value Styles the background of cells on hover
--zg-cell-background_hover_layout_row var(--zg-cell-background_hover) Styles the background of cells in 'row' layout-mode on hover
--zg-cell-background_layout_row var(--zg-cell-background) Styles the background of cells in 'row' layout-mode
--zg-cell-background_layout_row_sorted var(--zg-cell-background_sorted) Styles the background of cells in sorted column in 'row' layout-mode
--zg-cell-background_sorted Browser's default value Styles the background of cells in sorted column
--zg-cell-border 0 Styles the border of cells
--zg-cell-border-bottom var(--zg-cell-border, 0) Styles the bottom border of cells
--zg-cell-border-bottom_layout_row var(--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-left var(--zg-cell-border, 0) Styles the left border of cells
--zg-cell-border-left_layout_row var(--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-right var(--zg-cell-border, 0) Styles the right border of cells
--zg-cell-border-right_layout_row var(--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-top var(--zg-cell-border, 0) Styles the top border of cells
--zg-cell-border-top_layout_row var(--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_row var(--zg-cell-border-bottom, var(--zg-cell-border, 0)) Styles the border of cells in 'row' layout-mode
--zg-cell-color inherit Styles font color of text in cells
--zg-cell-color_hover var(--zg-cell-color) Styles font color of cells on hover
--zg-cell-color_hover_layout_row var(--zg-cell-color_hover, var(--zg-cell-color)) Styles font color of cells in 'row' layout-mode on hover
--zg-cell-color_layout_row var(--zg-cell-color, inherit) Styles font color of text in cells in 'row' layout-mode
--zg-cell-color_layout_row_sorted var(--zg-cell-color_sorted, var(--zg-cell-color)) Sets the font color of cells in sorted column in 'row' layout-mode
--zg-cell-color_sorted var(--zg-cell-color) Sets the font color of cells in sorted column
--zg-cell-content-border-bottom_layout_card var(--zg-cell-content-border_layout_card, 0) Styles the bottom border of card items in 'card' layout-mode
--zg-cell-content-border-left_layout_card var(--zg-cell-content-border_layout_card, 0) Styles the left border of card items in 'card' layout-mode
--zg-cell-content-border-right_layout_card var(--zg-cell-content-border_layout_card, 0) Styles the right border of card items in 'card' layout-mode
--zg-cell-content-border-top_layout_card var(--zg-cell-content-border_layout_card, 0) Styles the top border of card items in 'card' layout-mode
--zg-cell-content-border_layout_card 0 Styles the border of card items in 'card' layout-mode
--zg-cell-content-font-size_layout_card inherit Sets the font size of cards in 'card' layout-mode
--zg-cell-content-padding_layout_card 3px 0 Sets the padding of cards in 'card' layout-mode
--zg-cell-font-family inherit Sets the font family in cells
--zg-cell-font-family_layout_row var(--zg-cell-font-family, inherit) Sets the font family in cells in 'row' layout-mode
--zg-cell-font-size inherit Sets the font size in cells
--zg-cell-font-size_layout_row var(--zg-cell-font-size, inherit) Sets the font size in cells in 'row' layout-mode
--zg-cell-font-style inherit Sets the font style in cells
--zg-cell-font-style_layout_row var(--zg-cell-font-style, inherit) Sets the font style in cells in 'row' layout-mode
--zg-cell-font-weight inherit Sets the font weight in cells
--zg-cell-font-weight_layout_row var(--zg-cell-font-weight, inherit) Sets the font weight in cells in 'row' layout-mode
--zg-cell-height auto Sets height of cells
--zg-cell-height_layout_row var(--zg-cell-height, auto) Sets height of cells in 'row' layout-mode
--zg-cell-label-color_layout_card var(--theme-color-primary) Sets font color of label in cards in 'card' layout-mode
--zg-cell-label-display_layout_card flex Sets the display of label in cards in 'card' layout-mode
--zg-cell-label-font-size_layout_card 85% Sets font size of label in cards in 'card' layout-mode
--zg-cell-label-font-weight_layout_card Browser's default value Sets font weight of label in cards in 'card' layout-mode
--zg-cell-label-margin_layout_card 0 0 2px Sets the margin of label in cards in 'card' layout-mode
--zg-cell-label-overflow_layout_card Browser's default value Sets the overflow of label in cards in 'card' layout-mode
--zg-cell-label-transform_layout_card Browser's default value Sets transform of label in cards in 'card' layout-mode
--zg-cell-line-height inherit Sets line height of cells
--zg-cell-line-height_layout_row var(--zg-cell-line-height, inherit) Sets line height of cells in 'row' layout-mode
--zg-cell-padding var(--theme-padding_y) var(--theme-padding_x) Sets padding of cells
--zg-cell-padding_layout_row var(--zg-cell-padding, var(--theme-padding_y) var(--theme-padding_x)) Sets padding of cells in 'row' layout-mode
--zg-cell-transition Browser's default value Sets the transition of cells
--zg-cell-transition_layout_row var(--zg-cell-transition) Sets the transition of cells in 'row' layout-mode
--zg-cell-vertical-align middle Sets vertical alignment of items in cells
--zg-cell-vertical-align_layout_row var(--zg-cell-vertical-align, middle) Sets vertical alignment of items in cells in 'row' layout-mode
Top

CSS Selector

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

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

Slots

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

Top

[api: <zg-row>]