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.

<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>

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:

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>.

<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:

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.

<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>:

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.

<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:

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.

<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>.

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

Row-Details-Card-Mode Grid

ZGColumn Row-Details-Card-Mode Grid

Here is a complete grid setting the card mode on <zg-column type="row-details">:

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.

<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>

Row-Details-Card-Sidebar-Boundary Grid

Here is a complete grid with a row details drawer bounded by the page:

Related Resources

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

• Layouts
• getRowDetailsRenderer() API Method
• API Events List