<zg-row>
Version 1
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 |
|---|
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-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>]