<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.
| 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.
| Name | Default | Description | Demo | CSS Ref |
|---|---|---|---|---|
| --zg-row-body-background | Browser's default value | Styles the background of body rows | ||
| --zg-row-body-background_even | var(--zg-row-body-background) | Styles the background of 'even' body rows | ||
| --zg-row-body-background_even_hover | var(--zg-row-body-background_hover) | Styles the background of 'even' body rows on hover | ||
| --zg-row-body-background_hover | Browser's default value | Styles the background of body rows on hover | ||
| --zg-row-body-background_odd | var(--zg-row-body-background) | Styles the background of 'odd' body rows | ||
| --zg-row-body-background_odd_hover | var(--zg-row-body-background_hover) | Styles the background of 'odd' body rows on hover | ||
| --zg-row-body-border | var(--zg-row-body-border, var(--zg-row-border-bottom, var(--zg-row-border, 0))) | Styles the border of body rows | ||
| --zg-row-body-border-bottom | var(--zg-row-body-border, var(--zg-row-border-bottom, var(--zg-row-border, 0))) | Styles the bottom border of body rows | ||
| --zg-row-body-border-left | var(--zg-row-body-border, var(--zg-row-border-left, var(--zg-row-border, 0))) | Styles the left border of body rows | ||
| --zg-row-body-border-left | var(--zg-row-body-border, var(--zg-row-border-left, var(--zg-row-border, 0))) | Styles the left border of body rows | ||
| --zg-row-body-border-right | var(--zg-row-body-border, var(--zg-row-border-right, var(--zg-row-border), 0)) | Styles the right border of body rows | ||
| --zg-row-body-border-right | var(--zg-row-body-border, var(--zg-row-border-right, var(--zg-row-border), 0)) | Styles the right border of body rows | ||
| --zg-row-body-border-top | var(--zg-row-body-border, var(--zg-row-border-top, var(--zg-row-border, 1px solid var(--theme-border-color)))) | Styles the top border of body rows | ||
| --zg-row-body-color | var(--zg-row-color) | Sets the font color of body rows | ||
| --zg-row-body-color_even | var(--zg-row-body-color, var(--zg-row-color)) | Sets the font color of 'even' body rows | ||
| --zg-row-body-color_even_hover | var(--zg-row-body-color_hover, var(--zg-row-color_hover, var(--zg-row-color))) | Styles the font color of 'even' body rows on hover | ||
| --zg-row-body-color_hover | var(--zg-row-color_hover, var(--zg-row-color)) | Styles the font color of body rows | ||
| --zg-row-body-color_odd | var(--zg-row-body-color, var(--zg-row-color)) | Styles the font color of 'odd' body rows | ||
| --zg-row-body-color_odd_hover | var(--zg-row-body-color_hover, var(--zg-row-color_hover, var(--zg-row-color))) | Sets the font color of 'odd' body rows on hover | ||
| --zg-row-body-height | var(--zg-row-height) | Sets the height of body rows | ||
| --zg-row-body-height_even | var(--zg-row-body-height, var(--zg-row-height)) | Sets the height of 'even' body rows | ||
| --zg-row-body-height_odd | var(--zg-row-body-height, var(--zg-row-height)) | Sets the height of 'odd' body rows | ||
| --zg-row-border | 0 | Styles the border of row | ||
| --zg-row-border-bottom | var(--zg-row-border, var(--zg-row-border, 0)) | Styles the bottom border of row | ||
| --zg-row-card-background_even | var(--zg-row-card-background, var(--zg-row-body-background_even, var(--zg-row-body-background, #fff))) | Styles the background of 'even' cards in 'card' layout-mode | ||
| --zg-row-card-background_odd | var(--zg-row-card-background, var(--zg-row-body-background_odd, var(--zg-row-body-background, #fff))) | Styles the background of cards in 'card' layout-mode | ||
| --zg-row-card-border | 1px solid var(--theme-border-color) | Styles the border of cards in 'card' layout-mode | ||
| --zg-row-card-border-bottom_even | var(--zg-row-card-border_even, var(--zg-row-card-border-bottom, var(--zg-row-card-border, 1px solid var(--theme-border-color)))) | Styles the bottom border of 'even' cards in 'card' layout-mode | ||
| --zg-row-card-border-bottom_odd | var(--zg-row-card-border_odd, var(--zg-row-card-border-bottom, var(--zg-row-card-border, 1px solid var(--theme-border-color)))) | Styles the bottom border of 'odd' cards in 'card' layout-mode | ||
| --zg-row-card-border-left_even | var(--zg-row-card-border_even, var(--zg-row-card-border-left, var(--zg-row-card-border, 1px solid var(--theme-border-color)))) | Styles the left border of 'even' cards in 'card' layout-mode | ||
| --zg-row-card-border-left_odd | var(--zg-row-card-border_odd, var(--zg-row-card-border-left, var(--zg-row-card-border, 1px solid var(--theme-border-color)))) | Styles the left border of 'odd' cards in 'card' layout-mode | ||
| --zg-row-card-border-right_even | var(--zg-row-card-border_even, var(--zg-row-card-border-right, var(--zg-row-card-border, 1px solid var(--theme-border-color)))) | Styles the right border of 'even' cards in 'card' layout-mode | ||
| --zg-row-card-border-right_odd | var(--zg-row-card-border_odd, var(--zg-row-card-border-right, var(--zg-row-card-border, 1px solid var(--theme-border-color)))) | Styles the right border of 'odd' cards in 'card' layout-mode | ||
| --zg-row-card-border-top_even | var(--zg-row-card-border_even, var(--zg-row-card-border-top, var(--zg-row-card-border, 1px solid var(--theme-border-color)))) | Styles the top border of 'even' cards in 'card' layout-mode | ||
| --zg-row-card-border-top_odd | var(--zg-row-card-border_odd, var(--zg-row-card-border-top, var(--zg-row-card-border, 1px solid var(--theme-border-color)))) | Styles the top border of 'odd' cards in 'card' layout-mode | ||
| --zg-row-card-border_even | var(--zg-row-card-border-bottom, var(--zg-row-card-border, 1px solid var(--theme-border-color))) | Styles the border of 'even' cards in 'card' layout-mode | ||
| --zg-row-card-border_odd | var(--zg-row-card-border-bottom, var(--zg-row-card-border, 1px solid var(--theme-border-color))) | Styles the border of 'odd' cards in 'card' layout-mode | ||
| --zg-row-card-box-shadow | none | Applies a box shadow behind cards in 'card' layout-mode | ||
| --zg-row-card-box-shadow_odd | var(--zg-row-card-box-shadow, none) | Applies a box shadow behind 'odd' cards in 'card' layout-mode | ||
| --zg-row-card-display | grid | Sets the display of cards in 'card' layout-mode | ||
| --zg-row-card-flex-basis | 100% | Sets the flex-basis of cards in 'card' layout-mode | ||
| --zg-row-card-grid-gap | 10px | Sets the gap between cards in 'card' layout-mode | ||
| --zg-row-card-padding | 10px 0 5px | Sets the padding of cards in 'card' layout-mode when '[internal-card-header]' not added to '<zing-grid>' | ||
| --zg-row-color | Browser's default value | Sets the font color of all rows | ||
| --zg-row-height | Browser's default value | Sets the height of all rows |
Top
CSS Selector
As a non-visual element, you should not apply styles to this tag.
Top
Slots
There are no slots available for the <zg-row> web component.
Top
[api: <zg-row>]