Nested Data Table (Repeating Group)

Use this to display a nested table within a list

Overview

This nested repeating group is a fully responsive block that includes two repeating groups - a parent repeating group and a child repeating group. Use this nested data table when you need to group data by a group. For example, a list of users grouped by location. Each parent table row can be expanded to reveal the associated children rows.

Structure

This block consists of two main repeating groups:

• RepeatingGroup Parent: This is the repeating group that the list of items is grouped by. For demo purposes, we use Arbitrary Text as a data source. Click here to learn how to change the data source.

  • RepeatingGroup Child: This is the repeating group that lives in RepeatingGroup Parent. This repeating group also uses Arbitrary Text as its data source.

• Clicking on Group Expand/Collapse Icon in each parent data row will toggle the Group Main Children RG and reveal the children data entries.

• Group Main Horizontal Scroll (Do not Delete): This group has an id attribute that is linked to an element, HTML styles, which holds the css property of this group to enable horizontal scroll on smaller screens. The id name depends on the random string generated by Group Main data table so as to prevent id name collision.

• Group Inner Horizontal Scroll: This group has a minimum width in the layout section. This minimum width specifies to what extent we would want the repeating groups to squeeze before it starts to scroll horizontally.

• Group Main empty state: This group will be visible when RepeatingGroup Parent does not have any entries.

• A user can click on the ︙icon to edit or delete an item via a menu focus group. For more information on how to use the menufocusgroup_template reusable element, please click here.

How to set up

• Update the data type and data source for RepeatingGroup Parent. Click here to learn how to change the data source. Make sure to update the fields in the repeating group cell to reference current cell's data source's [field].

• Update the data type and data source for RepeatingGroup Child. Make sure to update the fields in the repeating group cell to reference current cell's data source's [field].

• Update the data source of menufocus_template.