INSTALLATION & USAGE 1. Add PrimeGrid Pro

Install PrimeGrid Pro – Smart Multi Data Tab and place the PrimeGrid element on your Bubble page.

Set the desired width and height.

PrimeGrid automatically adapts its interface to the available space.

2. Connect Your Data

Connect your Bubble Data Type list to the appropriate PrimeGrid source.

For a basic grid, you can use a single Data Type.

Example:

Search for Users

PrimeGrid analyzes the supplied records and generates the grid columns from their available fields.

3. Multi Data Type Setup

To use the main Multi Data Type functionality, connect additional Data Type sources.

Example:

Source 1 → Users
Source 2 → Products
Source 3 → Services
Source 4 → Tasks

The Data Types do not need to have identical fields.

Then choose your Multi Data Type visualization mode.

Stack Mode

Use Stack when records from multiple sources should appear vertically in a unified grid.

PrimeGrid keeps track of the original Data Type behind each record.

This allows View, Edit and Delete workflows to determine which Data Type should be accessed.

Parallel Mode

Use Parallel when your Data Types have different field structures and you want to preserve the columns belonging to each source.

Example:

Users
Name | Email | Phone

Products
Product | Price | Category

Tasks
Task | Priority | Status

PrimeGrid can represent all of them within the same grid environment.

4. Automatic Cell Types

PrimeGrid automatically detects and formats common field types.

Type Display
Text Standard text
Number Formatted numeric value
Yes/No Boolean visual representation
Date Formatted date
Image Thumbnail
URL Clickable link
Email Clickable email
Empty —

No manual Cell Type configuration is required for normal usage.

5. Search

PrimeGrid includes built-in global search.

The user can search through the grid directly from the toolbar.

The current search value is available through:

search_text

Search works with both Stack and Parallel configurations.

6. Filters

Use the built-in Filters control to create advanced filtering conditions.

When filters change, PrimeGrid triggers:

filter_changed

The current configuration is exposed through:

filter_json

This allows your Bubble application to react to filter changes when required.

7. Sorting

Users can sort data directly from grid columns.

PrimeGrid exposes:

sort_column

sort_direction

and triggers:

sort_changed

when sorting changes.

8. Column Resize & Reorder

Columns can be resized directly by the user.

Column reordering can also be enabled, allowing users to customize their table structure.

The current order is available through:

column_order

Changes trigger:

column_reordered

9. Conditional Formatting

Enable:

enable_conditional_formatting = yes

Then configure:

conditional_format_rules

Rule syntax:

column|operator|value|text_color|background_color|target

Example:

status|equals|Active|#047857|#ECFDF5|cell

Another example:

priority|equals|High|#FFFFFF|#DC2626|row

This allows PrimeGrid to automatically highlight important information.

Supported operators:

equals
not_equals
contains
not_contains
greater_than
less_than
greater_or_equal
less_or_equal
is_empty
is_not_empty

You can also use:

=
!=
>
<
>=
<=

Target:

cell — format only the matching cell.

row — format the entire matching row.

10. View Data

PrimeGrid includes a built-in View popup.

When a record is opened, the plugin exposes information about the selected record and its original Data Type.

Important States include:

view_row_id

view_source_type

This is especially useful with Multi Data Type grids because the source is preserved automatically.

11. Edit Data

PrimeGrid provides both editing UI and Bubble workflow integration.

When the user submits an edit, PrimeGrid triggers:

edit_submitted

and publishes:

edited_row_id

edited_column_key

edited_value

previous_value

edited_value_type

edit_source_type

Example

Create a workflow:

When PrimeGrid's edit_submitted

Then:

Data → Make changes to a thing

Search for the desired record using:

unique id = PrimeGrid's edited_row_id

For a Text field:

status = PrimeGrid's edited_value

Use:

Only when
PrimeGrid's edit_source_type is "Users"
AND
PrimeGrid's edited_column_key is "status"

The same architecture works in both Stack and Parallel modes.

Important: Bubble Field Types

edited_value is exposed for Bubble workflow integration.

Use edited_value_type to determine the detected field type.

Examples:

text
number
boolean
date
image
link

Bubble requires database values to match the native field type.

Text values can normally use edited_value directly.

Number values may require conversion to Number.

Yes/No values should be handled as Boolean values.

Date values may require conversion to Bubble Date format.

12. Delete Data

When the user confirms Delete, PrimeGrid triggers:

delete_requested

Use:

delete_row_id

and:

delete_source_type

to perform the Bubble database deletion.

Example:

Search for Users:first item

Constraint:

unique id = PrimeGrid's delete_row_id

Only when:

PrimeGrid's delete_source_type is "Users"

For Multi Data Type configurations, create the corresponding Bubble Delete action for each Data Type you allow users to delete.

13. CSV Export

Enable CSV using the appropriate CSV export setting.

Users can export data directly from the PrimeGrid toolbar.

When completed:

csv_exported

is triggered.

The generated CSV information is also exposed through:

exported_csv

14. PDF Export

Enable:

enable_pdf_export = yes

PrimeGrid displays the PDF Export control directly in the toolbar.

PDF Title

Use:

pdf_title

Example:

Sales Report
PDF Filename

Use:

pdf_filename

Example:

sales-report

PrimeGrid generates:

sales-report.pdf
PDF Orientation

Use:

pdf_orientation

Supported values:

landscape
portrait

Landscape is recommended for grids containing many columns.

PDF Export Scope

Use:

pdf_export_scope

Supported values:

current_page

Exports only the records currently displayed on the active page.

filtered

Exports all records matching the current Search/Filter configuration.

all

Exports all currently loaded grid records regardless of the active filter or pagination.

PDF States

is_pdf_exporting

Returns yes while the PDF is being generated.

pdf_export_error

Returns an error message if PDF generation fails.

PDF Events

pdf_exported

Triggered when PDF generation completes successfully.

pdf_export_error

Triggered if PDF generation fails.

PDF Export works with both:

Stack Mode

and

Parallel Mode

and does not require an external PDF API.

15. Dark Mode

PrimeGrid includes built-in Dark Mode support.

Use the plugin's Dark Mode configuration to integrate the grid with light or dark application interfaces.

IMPORTANT MULTI DATA TYPE STATES

These States are particularly useful when working with multiple Data Types:

State Purpose
multi_source_mode_current Current Stack or Parallel mode
source_types Data Types available to the grid
selected_source_type Source of selected record
clicked_source_type Source of clicked record
edit_source_type Source of record being edited
delete_source_type Source of record requested for deletion
view_source_type Source of record opened in View

These States are what make it possible for Bubble workflows to determine which Data Type a record belongs to, even when several different Data Types are being displayed by the same PrimeGrid element.

MARKETPLACE SHORT DESCRIPTION

Advanced Bubble data grid with Multi Data Type support, Stack & Parallel modes, Smart Edit, View/Delete workflows, Search, Filters, Sorting, Conditional Formatting, CSV/PDF Export, Dark Mode and professional grid customization.

MARKETPLACE FEATURE HIGHLIGHT

MULTI DATA TYPE — Display and manage multiple Bubble Data Types inside one intelligent grid using Stack or Parallel mode.

PDF FEATURE HIGHLIGHT

SMART PDF EXPORT — Export Current Page, Filtered Data or All Data to professional PDF reports with Portrait or Landscape orientation.