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)
Was this helpful?
Use this to display data in a 5-column data table and for more complex data table UI (e.g. nested repeating groups)
Was this helpful?
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 .
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 .
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. 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.
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.
Update the data type and data source for RepeatingGroup text (you will most likely want to change this to a non-text data type). to learn how to change the data source.