Mobile-Friendly Data Table (Repeating Group)

Use this to display data in a 5-column data table and for more complex data table UI (e.g. nested repeating groups)

Overview

This module allows a user to view a list of things in a mobile-friendly data table format and apply additional filters to the list. This module is useful when you need to display around 10 fields per row on desktop, and around 6-7 fields per row on mobile.

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.

There is another version of this block built using a Table element instead of Bubble's Repeating Group element. You should use this Repeating Group version if you need a more complex data table UI (e.g. nested repeating groups or clicking on a row to expand more details below the row). If you're building a simple data table, then we recommend using the Table element version.

Structure

• When this block is added to a page, it is placed within a Group main content - Paste group on the page. This group contains the responsive settings for all blocks.

• This block contains these main groups:

  • Group Main title block - This group contains the title, add button, and reusable element filters_template.

  • Group Main data table - This group contains desktop and mobile tables.

    • RepeatingGroup text- This repeating group that holds the main data that is displayed by the table. For demo purposes, we use Arbitrary Text as a data source. Click here to learn how to change the data source.

      • Group Inner desktop content container - This group is within the repeating group cells, and it contains the row value elements that are shown on desktop. This group is shown when the page width is greater than or equal to 767 pixels.

      • Group Inner mobile content container - This group is within the repeating group cells, and it contains the row value elements that are shown on mobile. This group is shown when the page width is less than or equal to 767 pixels.

• This block contains includes a menufocus_template reusable element.

How to set up

• Update the data type and data source for RepeatingGroup text (you will most likely want to change this to a non-text data type). Click here to learn how to change the data source.

• Modify the desktop and mobile fields by hiding or editing the existing fields. You will need to change the elements so they are referencing current cell's field for each repeating group cell to be dynamic.

• Update the data source for menufocus_template reusable element instances.