Infinite Columns Horizontal Scroll Data Table (Repeating Group)

Use this to display over 10 fields in a scrollable data table and for more complex data table UI (e.g. nested repeating groups)

Overview

This block allows a user to view a list of things in a mobile-friendly data table format and apply additional filters to the list. This block is useful when you need to display a high number of columns on desktop and mobile. The table is horizontally scrollable at all times (similar to an Excel spreadsheet).

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 Infinite Horizontal Scroll Data Table - This group contains the title, data table, empty state, and placeholder elements.

  • Group Main header section - contains the title, description, tabs, new button, and reusable element filters_template.

  • Group Main data table - contains the repeating group and table elements. The 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 scrolling container - contains the horizontal scrollable table. Please note that this group must have a min width of 1100 in order for the table to be scrollable and have an infinite width.

  • Group Main empty state - This group can become visible when the data table repeating group contains 0 entries.

How can I change the data source?

For more information, please read our documentation here.