---
title: "Row Details | Features"
description: "Use ZingGrid to easily create expandable rows through the row details feature."
url: https://www.zinggrid.com/docs/features/row-details
---

```text
experiment_id: web-retrieval-v1
fixture_id: /docs/features/row-details.md
mode: provenance
representation: markdown
origin_response_id: a6d6bb886adc56572596f86c7763da5d
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.700Z
version_nonce: 98e5c181f619d5bdfd7740f90377b129
generated_at_utc: 2026-11-09T16:15:16.891Z
response_nonce: 5b11e8eef01bb8aa3d5a3e23e78cd302
```

# Row Details

The row details feature allows you to easily add expandable rows to your grid.

Inside the expandable section, you can add ZingGrid inside to have nested grids.

This guide explains the different ways to enable row details.

## Row-Details-Renderer

You can setup a function that returns the innerHTML of the row details section.

To enable row details, use the `row-details-renderer` attribute and set it to the name of your renderer function.

Note that we define which columns to display in the parent grid. Then in the renderer, we specify the index of the data we want to display in child grid.

```html
<zing-grid row-details-renderer="rowDetailsRenderer" data='[
    { "first": "Maria", "last": "John", "tests": [{"test1": 0.92, "test2": 0.97 ,"test3": 0.84}] },
    { "first": "David", "last": "Smith", "tests":  [{"test1": 0.86, "test2": 0.79, "test3": 0.86}] },
    { "first": "Felicity", "last": "Snow", "tests": [{"test1": 0.84, "test2": 0.66, "test3": 0.76}] }
  ]'>
  <zg-colgroup>
    <zg-column index="first"></zg-column>
    <zg-column index="last"></zg-column>
  </zg-colgroup>
</zing-grid>
```

```js
let rowDetailsRenderer = (record, oDOMRowDetails) => {
  const nestedGrid = document.createElement('zing-grid');
  nestedGrid.data = record.tests;
  return nestedGrid;
};

ZingGrid.registerMethod(rowDetailsRenderer);
```

### Row-Details-Renderer Grid
Here is a complete grid with row-details using a renderer function:

[Example code](https://app.zingsoft.com/demos/embed/WXLCYC8S)

## Row-Details-Template

An alternative way to set the contents of the row details section is by using the `<template>` tag.

Then enable row details with `row-details-template` by setting it to the id of your `<template>`.

```html
<zing-grid row-details-template="rowDetailsTemplate" data='[
  { "first": "Maria", "last": "John", "tests": [{"test1": 0.92, "test2": 0.97 ,"test3": 0.84}] },
  { "first": "David", "last": "Smith", "tests":  [{"test1": 0.86, "test2": 0.79, "test3": 0.86}] },
  { "first": "Felicity", "last": "Snow", "tests": [{"test1": 0.84, "test2": 0.66, "test3": 0.76}] }
]'>
  <zg-colgroup>
    <zg-column index="first"></zg-column>
    <zg-column index="last"></zg-column>
  </zg-colgroup>
</zing-grid>

<template id="rowDetailsTemplate">
  <zing-grid data='[[record.tests]]'>
    <zg-colgroup>
      <zg-column index="test1"></zg-column>
      <zg-column index="test2"></zg-column>
      <zg-column index="test3"></zg-column>
    </zg-colgroup>
  </zing-grid>
</template>
```

### Row-Details-Template Grid
Here is a complete grid with row-details using a template:

[Example code](https://app.zingsoft.com/demos/embed/VZXL4P1R)

## ZGRowDetails Component

Instead of using the `<zing-grid>` attributes above to enable row details, you can also do it through the `<zg-row-details>` component.

Note that `<zg-row-details>` must contain a `<template>` of what you want in the row details section.

```html
<zing-grid data='[
  { "first": "Maria", "last": "John", "tests": [{"test1": 0.92, "test2": 0.97 ,"test3": 0.84}] },
  { "first": "David", "last": "Smith", "tests":  [{"test1": 0.86, "test2": 0.79, "test3": 0.86}] },
  { "first": "Felicity", "last": "Snow", "tests": [{"test1": 0.84, "test2": 0.66, "test3": 0.76}] }
]'>
  <zg-colgroup>
    <zg-column index="first"></zg-column>
    <zg-column index="last"></zg-column>
  </zg-colgroup>
  <zg-row-details>
    <template>
      <zing-grid data='[[record.tests]]'>
        <zg-colgroup>
          <zg-column index="test1"></zg-column>
          <zg-column index="test2"></zg-column>
          <zg-column index="test3"></zg-column>
        </zg-colgroup>
      </zing-grid>
    </template>
  </zg-row-details>
</zing-grid>
```
### ZGRowDetails Grid
Here is a complete grid with row-details using `<zg-row-details>`:

[Example code](https://app.zingsoft.com/demos/embed/MQNMH316)

## Card Mode Support

Row details also work when your grid is in card layout. Every way of setting up row details - `row-details-renderer`, `row-details-template`, and `<zg-row-details>` - carries over to card layout, so no extra setup is needed beyond putting the grid in card mode.

To view row details in card mode, add `layout="card"` to force card layout, or `layout-controls` to let users toggle between row and card layout themselves.

```html
<zing-grid layout="card" row-details-template="rowDetailsTemplate" data='[
  { "first": "Maria", "last": "John", "tests": [{"test1": 0.92, "test2": 0.97 ,"test3": 0.84}] },
  { "first": "David", "last": "Smith", "tests":  [{"test1": 0.86, "test2": 0.79, "test3": 0.86}] },
  { "first": "Felicity", "last": "Snow", "tests": [{"test1": 0.84, "test2": 0.66, "test3": 0.76}] }
]'>
  <zg-colgroup>
    <zg-column index="first"></zg-column>
    <zg-column index="last"></zg-column>
  </zg-colgroup>
</zing-grid>
```

Instead of the expand icon used in row layout, each card gets a "More Details" button in its footer. Clicking it opens that card's details and flips the button to "Close Details".

### Card Mode Row Details Grid
Here is a complete grid with row details in card layout:

[Example code](https://app.zingsoft.com/demos/embed/68U3HCH1)

## Row-Details-Card-Mode

Use the `row-details-card-mode` attribute to set how the details open in card layout:
* `bottom` (default) - the details open inside the card itself. Any number of cards can be open at once.
* `sidebar` - the details open in a single shared drawer on the right side of the grid. Only one card's details can be viewed at a time, so opening a card's details takes the drawer over from whichever card had it.

```html
<zing-grid layout="card" row-details-template="rowDetailsTemplate" row-details-card-mode="sidebar"
  src="https://cdn.zinggrid.com/datasets/aapl-stock-data.json">
</zing-grid>
```

The sidebar drawer shows the card's own content above the details content, and adds its own close button at the bottom. It also closes when you click outside of it.

This attribute cascades to the row details column, so you can set it on `<zg-column type="row-details">` instead, which takes precedence over the value on `<zing-grid>`.

```html
<zg-column type="row-details" row-details-card-mode="sidebar"></zg-column>
```

> **Note:** `row-details-card-mode` only applies while the grid is in card layout - it has no effect in row layout, where details always open under the row.

### Row-Details-Card-Mode Grid
Here is a complete grid with row details opening in a sidebar:

[Example code](https://app.zingsoft.com/demos/embed/VBE63OUU)

### ZGColumn Row-Details-Card-Mode Grid
Here is a complete grid setting the card mode on `<zg-column type="row-details">`:

[Example code](https://app.zingsoft.com/demos/embed/T5I3051L)

## Row-Details-Card-Sidebar-Boundary

When the drawer is enabled with `row-details-card-mode="sidebar"`, use the `row-details-card-sidebar-boundary` attribute to set what bounds it:
* `grid` (default) - the drawer is contained by the grid. It's pinned to the grid's right edge and spans the grid's body.
* `page` - the drawer is contained by the page instead. It's pinned to the right edge of the page and spans its full height, overlaying whatever sits beside the grid.

```html
<zing-grid layout="card" row-details-template="rowDetailsTemplate"
  row-details-card-mode="sidebar" row-details-card-sidebar-boundary="page"
  src="https://cdn.zinggrid.com/datasets/aapl-stock-data.json">
</zing-grid>
```

> **Note:** `row-details-card-sidebar-boundary` requires `row-details-card-mode="sidebar"`. It has no effect on the default `bottom` card mode, where the details open inside the card rather than in a drawer.

### Row-Details-Card-Sidebar-Boundary Grid
Here is a complete grid with a row details drawer bounded by the page:

[Example code](https://app.zingsoft.com/demos/embed/D5TBFVUB)

## Row Details API Methods

ZingGrid provides API methods to enable or get the value of row details through the following API methods:
- `getRowDetailsCardMode()`
- `getRowDetailsCardSidebarBoundary()`
- `getRowDetailsRenderer()`
- `getRowDetailsTemplate()`
- `setRowDetailsRenderer()`
- `setRowDetailsTemplate()`

### setRowDetailsTemplate() Grid
Here is a complete grid with row-details using `setRowDetailsTemplate`:

[Example code](https://app.zingsoft.com/demos/embed/L7NCHSDP)

## Related Resources
Here are some extra resources related to this feature to help with creating your grid:

* [Layouts](https://www.zinggrid.com/docs/features/layouts)
* [getRowDetailsRenderer() API Method](https://www.zinggrid.com/docs/api-methods#zing-grid)
* [API Events List](https://www.zinggrid.com/docs/api-events)