--- title: "ZingGrid Web Component: `` | Docs" description: "View our in depth tutorial covering the web component `` tag and the associated features for the JavaScript grid." url: https://www.zinggrid.com/docs/v1/api/tags/zg-row --- ```text experiment_id: web-retrieval-v1 fixture_id: /docs/v1/api/tags/zg-row.md mode: provenance representation: markdown origin_response_id: 833c2e1d4ac1aaddf9cf580641c6d046 version: 2026-10-21 version_created_at_utc: 2026-10-21T20:42:35.777Z version_nonce: 67657d4ea57a6c005147298c5297c034 generated_at_utc: 2026-11-08T23:36:18.632Z response_nonce: 69b97ccab73a2f26cf33a93cdd800504 ``` # `` Version 1 [Interactive Storybook Playground](https://storybook.zinggrid.com/?path=/docs/zg-row--docs) The `` tag is a web component that is the container for the ``, ``, and `` elements. It corresponds to the `` tag on an HTML table. The `` 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](https://storage.googleapis.com/zinggrid-pwa.appspot.com/components/zg-row-web-component-dom.png "Image of the DOM relationship for the zg-row web component tag") | Component | Relationship | Type | Ancestor | | --- | --- | --- | --- | | [ZGBody](https://www.zinggrid.com/docs/api/tags/zg-body) | Parent | Generated | n/a | | [ZGFoot](https://www.zinggrid.com/docs/api/tags/zg-foot) | Parent | Generated | n/a | | [ZGHead](https://www.zinggrid.com/docs/api/tags/zg-head) | Parent | Generated | n/a | | [ZGCell](https://www.zinggrid.com/docs/api/tags/zg-cell) | Child | Generated | [ZGBody](https://www.zinggrid.com/docs/api/tags/zg-body), [ZGFoot](https://www.zinggrid.com/docs/api/tags/zg-foot) | | [ZGFilter](https://www.zinggrid.com/docs/api/tags/zg-filter) | Child | Generated | [ZGHead](https://www.zinggrid.com/docs/api/tags/zg-head) | | [ZGHeadCell](https://www.zinggrid.com/docs/api/tags/zg-head-cell) | Child | Generated | [ZGHead](https://www.zinggrid.com/docs/api/tags/zg-head) | #### Related Web Components - [``](https://www.zinggrid.com/docs/api/tags/zing-grid/) - [``](https://www.zinggrid.com/docs/api/tags/zg-colgroup/) - [``](https://www.zinggrid.com/docs/api/tags/zg-colgroup/) - [``](https://www.zinggrid.com/docs/api/tags/zg-cell/) ## Attributes There are no attributes available for the `` web component. ## CSS Variables `` can be styled with CSS variables, like so: ```css :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](https://www.zinggrid.com/docs/api/css-variables/reference/) or our [Styling Basics guide](https://www.zinggrid.com/docs/getting-started/styling-basics/) to learn more about styling the grid. | Name | Default | Description | Demo | | --- | --- | --- | --- | | `--zg-cell-background` | var(--zg-cell-background) | Styles the background of cells | [Example code](https://app.zingsoft.com/demos/embed/FPS1Y1BU) | | `--zg-cell-background_hover` | Browser's default value | Styles the background of cells on hover | [Example code](https://app.zingsoft.com/demos/embed/RT19PJTK) | | `--zg-cell-background_hover_layout_row` | var(--zg-cell-background_hover) | Styles the background of cells in 'row' layout-mode on hover | [Example code](https://app.zingsoft.com/demos/embed/K3W62J0D) | | `--zg-cell-background_layout_row` | var(--zg-cell-background) | Styles the background of cells in 'row' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/OB4ZAO0E) | | `--zg-cell-background_layout_row_sorted` | var(--zg-cell-background_sorted) | Styles the background of cells in sorted column in 'row' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/EM0YQ90M) | | `--zg-cell-background_sorted` | Browser's default value | Styles the background of cells in sorted column | [Example code](https://app.zingsoft.com/demos/embed/DNFOJBRU) | | `--zg-cell-border` | 0 | Styles the border of cells | [Example code](https://app.zingsoft.com/demos/embed/5IAJRJAX) | | `--zg-cell-border_layout_row` | var(--zg-cell-border-bottom, var(--zg-cell-border, 0)) | Styles the border of cells in 'row' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/VUY7YJN0) | | `--zg-cell-border-bottom` | var(--zg-cell-border, 0) | Styles the bottom border of cells | [Example code](https://app.zingsoft.com/demos/embed/6W1MBMS5) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/CBCRNIEW) | | `--zg-cell-border-left` | var(--zg-cell-border, 0) | Styles the left border of cells | [Example code](https://app.zingsoft.com/demos/embed/D7KFKEG9) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/09D81J37) | | `--zg-cell-border-right` | var(--zg-cell-border, 0) | Styles the right border of cells | [Example code](https://app.zingsoft.com/demos/embed/I1HTZ8O9) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/38MHHLP7) | | `--zg-cell-border-top` | var(--zg-cell-border, 0) | Styles the top border of cells | [Example code](https://app.zingsoft.com/demos/embed/5LO8GANO) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/7MVAC7VQ) | | `--zg-cell-color` | inherit | Styles font color of text in cells | [Example code](https://app.zingsoft.com/demos/embed/W7Z4EQX7) | | `--zg-cell-color_hover` | var(--zg-cell-color) | Styles font color of cells on hover | [Example code](https://app.zingsoft.com/demos/embed/KSG94XLN) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/0VCGU2R9) | | `--zg-cell-color_layout_row` | var(--zg-cell-color, inherit) | Styles font color of text in cells in 'row' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/4L4VCAVC) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/64ZKT87T) | | `--zg-cell-color_sorted` | var(--zg-cell-color) | Sets the font color of cells in sorted column | [Example code](https://app.zingsoft.com/demos/embed/427LWHVI) | | `--zg-cell-content-border_layout_card` | 0 | Styles the border of card items in 'card' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/PL7XVRO6) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/67415UAZ) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/KJY3M0EU) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/UL1AANE2) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/S1QU5P5C) | | `--zg-cell-content-font-size_layout_card` | inherit | Sets the font size of cards in 'card' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/YUH3FMTN) | | `--zg-cell-content-padding_layout_card` | 3px 0 | Sets the padding of cards in 'card' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/FRM4C9ZH) | | `--zg-cell-font-family` | inherit | Sets the font family in cells | [Example code](https://app.zingsoft.com/demos/embed/FBT1I49W) | | `--zg-cell-font-family_layout_row` | var(--zg-cell-font-family, inherit) | Sets the font family in cells in 'row' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/WEF8KGXB) | | `--zg-cell-font-size` | inherit | Sets the font size in cells | [Example code](https://app.zingsoft.com/demos/embed/5VXTAUSO) | | `--zg-cell-font-size_layout_row` | var(--zg-cell-font-size, inherit) | Sets the font size in cells in 'row' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/9NBFBSO0) | | `--zg-cell-font-style` | inherit | Sets the font style in cells | [Example code](https://app.zingsoft.com/demos/embed/MBBRNXUX) | | `--zg-cell-font-style_layout_row` | var(--zg-cell-font-style, inherit) | Sets the font style in cells in 'row' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/LJYPK43Z) | | `--zg-cell-font-weight` | inherit | Sets the font weight in cells | [Example code](https://app.zingsoft.com/demos/embed/C8CHJ5SG) | | `--zg-cell-font-weight_layout_row` | var(--zg-cell-font-weight, inherit) | Sets the font weight in cells in 'row' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/4FCZ5S1K) | | `--zg-cell-height` | auto | Sets height of cells | [Example code](https://app.zingsoft.com/demos/embed/0ADC78MI) | | `--zg-cell-height_layout_row` | var(--zg-cell-height, auto) | Sets height of cells in 'row' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/2I7KY86Q) | | `--zg-cell-label-color_layout_card` | var(--theme-color-primary) | Sets font color of label in cards in 'card' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/WLX26P3Q) | | `--zg-cell-label-display_layout_card` | flex | Sets the display of label in cards in 'card' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/VJ2V5JBW) | | `--zg-cell-label-font-size_layout_card` | 85% | Sets font size of label in cards in 'card' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/9M0IV26C) | | `--zg-cell-label-font-weight_layout_card` | Browser's default value | Sets font weight of label in cards in 'card' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/SW2D92C5) | | `--zg-cell-label-margin_layout_card` | 0 0 2px | Sets the margin of label in cards in 'card' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/4YSN75PR) | | `--zg-cell-label-overflow_layout_card` | Browser's default value | Sets the overflow of label in cards in 'card' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/RW2Y5KUP) | | `--zg-cell-label-transform_layout_card` | Browser's default value | Sets transform of label in cards in 'card' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/7HNBULB8) | | `--zg-cell-line-height` | inherit | Sets line height of cells | [Example code](https://app.zingsoft.com/demos/embed/13BR35NS) | | `--zg-cell-line-height_layout_row` | var(--zg-cell-line-height, inherit) | Sets line height of cells in 'row' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/V1O45PMA) | | `--zg-cell-padding` | var(--theme-padding_y) var(--theme-padding_x) | Sets padding of cells | [Example code](https://app.zingsoft.com/demos/embed/L55WT5PW) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/LXJRGOVN) | | `--zg-cell-transition` | Browser's default value | Sets the transition of cells | [Example code](https://app.zingsoft.com/demos/embed/XB0M7RTK) | | `--zg-cell-transition_layout_row` | var(--zg-cell-transition) | Sets the transition of cells in 'row' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/KNVU6GWJ) | | `--zg-cell-vertical-align` | middle | Sets vertical alignment of items in cells | [Example code](https://app.zingsoft.com/demos/embed/IRBQ32WL) | | `--zg-cell-vertical-align_layout_row` | var(--zg-cell-vertical-align, middle) | Sets vertical alignment of items in cells in 'row' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/4FFXFDKI) | ## CSS Selector `` can be styled by common CSS selectors, like so: ```css zg-row { font-size: 2rem; } ``` ## Slots There are no slots available for the `` web component.