Data Table Bubble Mobile

Demo to preview the plugin:

✅

Live Demo: https://zeroqode-demo-21.bubbleapps.io/plyr

✅

Bubble Editor: https://bubble.io/page?version=live&type=page&name=sumsub_identity_verification&id=zeroqode

Introduction

The Data Table and View Bubble Mobile plugin is designed to offer a professional, native mobile solution for displaying and managing tabular data in Bubble mobile applications. This plugin provides a fully-featured data table component with search functionality, column sorting, multi-row selection, pagination, customizable themes (light/dark/custom), and comprehensive workflow actions for building data-driven mobile experiences. The table automatically handles Bubble's native data structures, supports conditional formatting, and includes touch-optimized interactions like long-press for row details and swipe-friendly navigation. Prerequisites include having a Bubble account with native mobile app capabilities enabled, and basic familiarity with JSON syntax for configuring column definitions (detailed examples and templates are provided in the documentation).

How to setup

Step 1 – Add the Plugin Element to Your Page

Step 2 – Configure Properties

Plugin Element - Data Table

A high-performance, mobile-optimized data table component for Bubble native apps that enables users to display, search, sort, and interact with large datasets through an intuitive touch-friendly interface with multi-select capabilities.

Title	Description	Type
Data Source	List of items to display in the table	Any Thing
Columns Configuration	JSON string defining table columns structure	Text (JSON)
Rows Per Page	Number of rows to display per page (default: 20)	Number
Font Size	Base font size in pixels (default: 14)	Number
Enable Search	Show search bar for filtering data	Yes/No
Enable Pagination	Enable page navigation controls	Yes/No
Enable Multi-Select	Allow selecting multiple rows with checkboxes	Yes/No
Show Row Numbers	Display row number column	Yes/No
Sticky Header	Keep header fixed while scrolling	Yes/No
Enable Grouping	Enable grouping rows by column	Yes/No
Group By Column	Column key to group rows by	Text
Theme	Color theme preset: light, dark, or custom	Text
Header Background Color	Background color for table header (custom theme)	Color
Row Background Color	Background color for table rows (custom theme)	Color
Text Color	Primary text color (custom theme)	Color
Border Color	Border and divider color (custom theme)	Color
Primary Color	Accent color for interactive elements (custom theme)	Color
Search Background Color	Search bar background color (custom theme)	Color
Secondary Text Color	Secondary text color (custom theme)	Color
Placeholder Text Color	Placeholder text color for inputs (custom theme)	Color
Modal Overlay Color	Modal background overlay color (custom theme)	Color
Loading Overlay Color	Loading indicator overlay color (custom theme)	Color

Name	Description	Title
Column Key	The key of the column to sort by	Column Key
Direction	Sort direction: `"asc"`, `"desc"`	Direction

Name	Description	Type
Search Query	The search term to filter by	Text

Name	Description	Type
Search Query	The index of the row to select (0-based)	Number
Selected	True to select, false to deselect	Yes/No

Name	Description	Type
Selected	True to select, false to deselect	Yes/No

Data Table Bubble Mobile

Demo to preview the plugin:

Introduction

How to setup

Step 1 – Add the Plugin Element to Your Page

Step 2 – Configure Properties

Plugin Element - Data Table

Fields

Element Actions

Exposed states

Element Events

Workflow example

Step-by-Step Guide: Configuring Table Columns

Overview

Step 1: Identify Your Bubble Field Names

In Bubble Editor:

Step 2: Apply in Bubble

Changelogs

Name	Description
Row Clicked	Triggered when a user clicks or taps on a row
Row Selected	Triggered when row selection changes (select/deselect)
Page Changed	Triggered when user navigates to a different page
Search Changed	Triggered when search query is modified
Data Sorted	Triggered when data is sorted by a column
Data Filtered	Triggered when data is filtered by search or reset
Group Toggled	Triggered when a group is expanded or collapsed
Export completed	Triggered when export operation finishes (for future use)

Data Table Bubble Mobile

Demo to preview the plugin:

Introduction

How to setup

Step 1 – Add the Plugin Element to Your Page

Step 2 – Configure Properties

Plugin Element - Data Table

Fields

Element Actions

Exposed states

Element Events﻿

Workflow example

Step-by-Step Guide: Configuring Table Columns

Overview

Step 1: Identify Your Bubble Field Names

In Bubble Editor:

Step 2: Apply in Bubble

Changelogs

Element Events