Infinite Columns Horizontal Scroll Data Table (Table Element)

Use this to display over 10 fields in a simple scrollable data table

Overview

This block is built with Bubble’s table element. This block is useful when you need to display a large number of columns on desktop and mobile. The table’s initial width is designed to exceed the page width because of its many columns. The table can be scrolled to the right to see the extra columns outside the page width. The table’s list of data can be sorted using the first column property either in ascending or descending order. The table also has a checkbox that can be used to select some rows or every row in the table.

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 Repeating Group instead of Bubble's Table element. You should use this Table Element version if you're building a simple data table. 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) then you should use the Repeating Group version as Bubble's table element cannot support that.

Structure

• This block consists of four main groups:

  • var - RG Table text: This is a hidden repeating group that holds the main data that is displayed by the table. This hidden repeating group is used because, as of the time of writing this, the table datasource cannot be referenced. For demo purposes, we use Arbitrary Text as a data source. Click here to learn how to change the data source.

    • sort field descending?: This is a custom state found on the var - RG Selected Rows text repeating group. It is used to determine whether this repeating group data source should be sorted in ascending or descending order.

  • var - RG Selected Rows text: This is also a hidden repeating group that holds the list of data that is selected on the table using the checkbox.

  • Table Main Data Table: This is the new Bubble table element. It references the var - RG Table text as its data source, and it is set to infinite rows.

    • Group Main Header Checkbox: This checkbox lives in the header row of the table, Row 0, and is used to select or deselect all rows of the table. When all rows are selected, they are added to the var - RG Selected Rows text repeating group.

    • Group Main Row Checkbox: This checkbox lives in the body row, Row 1 (Repeating), of the data table and is used to select a specific row in the table. A selected row is added to the var - RG Selected Rows text repeating group.

    • Group Sort 0A: This sorting group lives in the first column of the header row of the table, Row 0. This toggles the sort from descending to ascending and back.

    • menufocus_template:This reusable element lives in the body row, Row 1 (Repeating), of the data table. It contains all the additional actions you can perform on each row. (e.g., edit data, delete data, and more)

  • Group Main empty state: This group will be visible when var - RG Table text repeating group does not have any entries.

How to set up

• Update the data type and data source for var - RG Table text repeating group (you will most likely want to change this to a non-text data type). Ensure that the sorting is done inside the search expression instead of using the sorting operator outside the search expression.

• Update the data type for var - RG Selected Rows text repeating group and Table Main Data Table text elements so their data type matches repeating group var - RG Table text data type.

• Update the data source for menufocus_template.