MARKETPLACE
PLUGINS
JSON DATA TABLE
JSON Data Table logo

JSON Data Table

Published May 2025
   •    Updated this week

Plugin details

Description:
This Bubble.io plugin renders a dynamic data table from JSON input, with optional pagination and row selection via checkboxes. It supports:

* Parsing JSON array data and displaying it in a styled HTML table.
* Optional checkboxes for selecting rows, with selected rows state published.
* Pagination controls ("Prev" and "Next" buttons) for navigating large datasets.
* Responsive and clean table design with customizable page size.
* Emits events on page change and selection change for workflow integration.

Perfect for displaying tabular JSON data in a user-friendly, interactive manner.

---

Service URL:
https://plugin-49094.bubbleapps.io/version-test

---

Editor URL:

https://bubble.io/page?id=plugin-49094&test_plugin=1748547282250x937957999509766100_current&tab=Design&name=index&elements=bTHvv

Free

For everyone

4.0 stars   •   1 ratings
55 installs  
This plugin does not collect or track your personal data.

Other actions

Platform

Web

Contributor details

JiPalJi logo
JiPalJi
Joined 2022   •   23 Plugins
View contributor profile

Instructions

How to Use / Instructions:
1. Add the plugin element to your Bubble page.

2. Set properties:

  * json\_data (string):** JSON string representing an array of objects to display as table rows.
  * page\_size (number):** Number of rows per page (default: 10).
  * show\_checkboxes (boolean):** Enable checkboxes for row selection.
  * enable\_pagination (boolean):** Enable pagination controls.
  * current\_page (number):** Current page number (used internally to maintain pagination state).

3. Events published:

  * `page_changed`: Triggered when user changes page via pagination buttons.
  * `selection_changed`: Triggered when user checks/unchecks a row.

4. States published:

  * `current_page`: The current page number (for workflow or display).
  * `selected_rows`: JSON string array of selected rows (serialized from the row objects).

5. Use workflows to respond to these events, for example:

  * Load next page when `page_changed` triggers.
  * Process selected rows when `selection_changed` triggers.

6. Notes:

  * The JSON data must be a valid JSON array of objects.
  * Each object’s keys become column headers.
  * Large JSON data will be paginated based on page size.


Types

This plugin can be found under the following types:
Element   •   Event

Categories

This plugin can be found under the following categories:
Productivity   •   Data (things)   •   Ecommerce   •   Visual Elements

Resources

Support contact
Documentation
Tutorial

Rating and reviews

Average rating (4.0)

page size customize not work
October 1st, 2025
Bubble