Mobile-Friendly Data Table (Table Element)

Use this to display data in a simple 5-column data table

Overview

This block is built with Bubble’s table element. This table has 5 columns, with each column having additional text to show other information. On a mobile screen, when the screen width becomes smaller than the minimum width of the table, the table can be scrolled horizontally. 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 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.