--- 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/api/tags/zg-row --- ```text experiment_id: web-retrieval-v1 fixture_id: /docs/api/tags/zg-row.md mode: provenance representation: markdown origin_response_id: 7d90d9e48f1d1863699907fff880b067 version: 2026-10-21 version_created_at_utc: 2026-10-21T20:42:35.647Z version_nonce: 31174e470c7857c3dbe14e7427fc8f57 generated_at_utc: 2026-11-07T21:34:20.724Z response_nonce: 9859c3e8963dc9eead99c204aa7a828f ``` # `` [Interactive Storybook Playground](https://storybook.zinggrid.com/?path=/docs/components-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/v2/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-row-body-background` | Browser's default value | Styles the background of body rows | [Example code](https://app.zingsoft.com/demos/embed/90PL3ZDR) | | `--zg-row-body-background_even` | var(--zg-row-body-background) | Styles the background of 'even' body rows | [Example code](https://app.zingsoft.com/demos/embed/VMHOQP1A) | | `--zg-row-body-background_even_hover` | var(--zg-row-body-background_hover) | Styles the background of 'even' body rows on hover | [Example code](https://app.zingsoft.com/demos/embed/AIYZXTF0) | | `--zg-row-body-background_hover` | Browser's default value | Styles the background of body rows on hover | [Example code](https://app.zingsoft.com/demos/embed/FNZQKLOI) | | `--zg-row-body-background_odd` | var(--zg-row-body-background) | Styles the background of 'odd' body rows | [Example code](https://app.zingsoft.com/demos/embed/GB8RXLPN) | | `--zg-row-body-background_odd_hover` | var(--zg-row-body-background_hover) | Styles the background of 'odd' body rows on hover | [Example code](https://app.zingsoft.com/demos/embed/41M3NTDX) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/EAVHDY7O) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/HNJ2XN7Y) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/E72YL6QW) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/E72YL6QW) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/B3XG2R64) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/B3XG2R64) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/9PTJDF3I) | | `--zg-row-body-color` | var(--zg-row-color) | Sets the font color of body rows | [Example code](https://app.zingsoft.com/demos/embed/ZWULY1D1) | | `--zg-row-body-color_even` | var(--zg-row-body-color, var(--zg-row-color)) | Sets the font color of 'even' body rows | [Example code](https://app.zingsoft.com/demos/embed/96LE1ORX) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/9OLTDTMD) | | `--zg-row-body-color_hover` | var(--zg-row-color_hover, var(--zg-row-color)) | Styles the font color of body rows | [Example code](https://app.zingsoft.com/demos/embed/XCEJKX89) | | `--zg-row-body-color_odd` | var(--zg-row-body-color, var(--zg-row-color)) | Styles the font color of 'odd' body rows | [Example code](https://app.zingsoft.com/demos/embed/RRFIV8VL) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/XVED8WRA) | | `--zg-row-body-height` | var(--zg-row-height) | Sets the height of body rows | [Example code](https://app.zingsoft.com/demos/embed/E2CM149E) | | `--zg-row-body-height_even` | var(--zg-row-body-height, var(--zg-row-height)) | Sets the height of 'even' body rows | [Example code](https://app.zingsoft.com/demos/embed/PHUE49RH) | | `--zg-row-body-height_odd` | var(--zg-row-body-height, var(--zg-row-height)) | Sets the height of 'odd' body rows | [Example code](https://app.zingsoft.com/demos/embed/CC4GKUD7) | | `--zg-row-border` | 0 | Styles the border of row | [Example code](https://app.zingsoft.com/demos/embed/W9UFLHOX) | | `--zg-row-border-bottom` | var(--zg-row-border, var(--zg-row-border, 0)) | Styles the bottom border of row | [Example code](https://app.zingsoft.com/demos/embed/6ZQGCDWL) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/Z3JQXTST) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/MYI4STFX) | | `--zg-row-card-border` | 1px solid var(--theme-border-color) | Styles the border of cards in 'card' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/5V9VVXDQ) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/H8PWRCJT) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/48K2LXTZ) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/UKFWTUFU) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/6KWRAGP6) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/T8FJCD4O) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/E0MU4LOA) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/NYUK87GS) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/BQ9TSN4A) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/UWJMSEYU) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/MYMKX9W0) | | `--zg-row-card-box-shadow` | none | Applies a box shadow behind cards in 'card' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/HQ7WKPH0) | | `--zg-row-card-box-shadow_odd` | var(--zg-row-card-box-shadow, none) | Applies a box shadow behind 'odd' cards in 'card' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/1D7VE3BL) | | `--zg-row-card-display` | grid | Sets the display of cards in 'card' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/Y17MDY9A) | | `--zg-row-card-flex-basis` | 100% | Sets the flex-basis of cards in 'card' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/T0ZQ0N6R) | | `--zg-row-card-grid-gap` | 10px | Sets the gap between cards in 'card' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/JOUVG6NN) | | `--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>' | [Example code](https://app.zingsoft.com/demos/embed/3ANH9F1F) | | `--zg-row-color` | Browser's default value | Sets the font color of all rows | [Example code](https://app.zingsoft.com/demos/embed/DZMUUEIE) | | `--zg-row-height` | Browser's default value | Sets the height of all rows | [Example code](https://app.zingsoft.com/demos/embed/MG7QBHBV) | ## CSS Selector As a non-visual element, you should not apply styles to this tag. ## Slots There are no slots available for the `` web component.