---
title: "ZingGrid Web Component: `<zg-row-details>` | Docs"
description: "View our in depth tutorial covering the web component `<zg-row-details>` tag and the associated features for the JavaScript grid."
url: https://www.zinggrid.com/docs/api/tags/zg-row-details
---

```text
experiment_id: web-retrieval-v1
fixture_id: /docs/api/tags/zg-row-details.md
mode: provenance
representation: markdown
origin_response_id: 52eee9d76a51ff4c4860249483a11563
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.646Z
version_nonce: f6b0db2bbb9e5c18e336baddce4dd914
generated_at_utc: 2026-11-08T23:36:19.367Z
response_nonce: 279311ca59d9db8c75931a8d3e912b96
```

# `<zg-row-details>`

[Interactive Storybook Playground](https://storybook.zinggrid.com/?path=/docs/components-zg-row-details--docs)

The `<zg-row-details>` tag is a web component that is the container row expansion.

![Image of the DOM relationship for the zg-row-details web component tag](https://storage.googleapis.com/zinggrid-pwa.appspot.com/components/v2/zg-row-details-web-component-dom.png "Image of the DOM relationship for the zg-row-details web component tag")

| Component | Relationship | Type | Ancestor |
| --- | --- | --- | --- |
| [ZingGrid](https://www.zinggrid.com/docs/api/tags/zing-grid) | Parent | Manual | n/a |
| [ZGRow](https://www.zinggrid.com/docs/api/tags/zg-row) | Parent | Generated | n/a |
| [ZingGrid](https://www.zinggrid.com/docs/api/tags/zing-grid) | Child | Generated, Manual | n/a |

#### Related Web Components

- [`<zing-grid>`](https://www.zinggrid.com/docs/api/tags/zing-grid/)
- [`<zg-row>`](https://www.zinggrid.com/docs/api/tags/zg-row/)

## Attributes

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

## CSS Variables

`<zg-row-details>` can be styled with CSS variables, like so:

```css
:root {
  --zg-row-details-background: red;
}
```

Below is a list of all the associated `--zg-row-details` 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-details-background` | var(--zg-head-background) | Styles the background of zg-row-details (v2.x.x only) | [Example code](https://app.zingsoft.com/demos/embed/ZQITYBCD) |
| `--zg-row-details-border` | 0 | Styles the border of zg-row-details (v2.x.x only) | [Example code](https://app.zingsoft.com/demos/embed/XUPZGG5M) |
| `--zg-row-details-border-bottom` | 0 | Styles the bottom border of zg-row-details (v2.x.x only) | [Example code](https://app.zingsoft.com/demos/embed/1C1FUBS3) |
| `--zg-row-details-border-left` | 0 | Styles the left border of zg-row-details (v2.x.x only) | [Example code](https://app.zingsoft.com/demos/embed/0Q6KGVBN) |
| `--zg-row-details-border-right` | 0 | Styles the right border of zg-row-details (v2.x.x only) | [Example code](https://app.zingsoft.com/demos/embed/XUOEKMK0) |
| `--zg-row-details-border-top` | 0 | Styles the top border of zg-row-details (v2.x.x only) | [Example code](https://app.zingsoft.com/demos/embed/8AAENGKD) |
| `--zg-row-details-color` | inherit | Sets the font color of zg-row-details (v2.x.x only) | [Example code](https://app.zingsoft.com/demos/embed/9NW8L2IH) |
| `--zg-row-details-font-family` | inherit | Sets the font family of zg-row-details | [Example code](https://app.zingsoft.com/demos/embed/1IC8COR5) |
| `--zg-row-details-font-size` | inherit | Sets the font size of zg-row-details (v2.x.x only) | [Example code](https://app.zingsoft.com/demos/embed/3O7ZITE8) |
| `--zg-row-details-font-style` | inherit | Sets the font style of zg-row-details (v2.x.x only) | [Example code](https://app.zingsoft.com/demos/embed/IWIXU6TH) |
| `--zg-row-details-font-weight` | inherit | Sets the font weight of zg-row-details (v2.x.x only) | [Example code](https://app.zingsoft.com/demos/embed/LXCWR0IN) |
| `--zg-row-details-height` | auto | Sets the height of zg-row-details (v2.x.x only) | [Example code](https://app.zingsoft.com/demos/embed/GEKP6YHP) |
| `--zg-row-details-line-height` | inherit | Sets the line height of zg-row-details (v2.x.x only) | [Example code](https://app.zingsoft.com/demos/embed/IIF14UEK) |
| `--zg-row-details-min-height` | 70px | Sets the min-height of zg-row-details (v2.x.x only) | [Example code](https://app.zingsoft.com/demos/embed/BINV8SFR) |
| `--zg-row-details-padding` | 20px 70px | Sets the padding of zg-row-details (v2.x.x only) | [Example code](https://app.zingsoft.com/demos/embed/8GUP63P3) |
| `--zg-row-details-transition` | Browser's default value | Sets the transition of zg-row-details (v2.x.x only) | [Example code](https://app.zingsoft.com/demos/embed/XB0M7RTK) |
| `--zg-row-details-word-break` | break-all | Sets the word break of items in zg-row-details (v2.x.x only) | [Example code](https://app.zingsoft.com/demos/embed/CKYSM34R) |

## CSS Selector

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

```css
zg-row-details {
  font-size: 2rem;
}
```

## Slots

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