# Nested Data Table (Repeating Group)

## 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](https://docs.airdev.co/canvas/canvas-library/updating-asset-rg-data-source) 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](https://docs.airdev.co/canvas/5.1/canvas-functionality/reference/reusable-elements/menu-focus-elements). 

## How to set up

* Update the data type and data source for **RepeatingGroup Parent**. [Click here](https://docs.airdev.co/canvas/5.1/canvas-library/updating-asset-rg-data-source) 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**.