Advanced Editable Tables ✏️

Spreadsheet / Excel like tables for Bubble supporting formulas and different data types

🔗 Links

Demo 1 (Data Types): Demo | Editor

Demo 2 (Spreadsheet like Google Sheets / Excel): Demo | Editor

Plugin Page

Forum

🔥 Main Features

  • Can be used like a static read-only or editable table

  • Create professional Excel-like and Google Sheets-like spreadsheets

  • Formulas support

  • Powerful cells. It can contain text, html, number, image, checkbox, radio button, dropdown, calendar...

  • Cells HTML code support

  • Export data to CSV

  • Context menu support

  • Dynamically add / remove column and rows

  • Columns reordering

  • Responsive table automatically adapts to any screen size

  • Sorting, Searching, Pagination and more

📚 Documentation

➡️ Quick Start

Adding a table is simple and straightforward.

  1. Install the plugin and add an Editable Table element on your page:

2. In your Workflow (for example, when the Page is loaded event is triggered) insert your data column by column respecting the data type. For example, for a text data column:

The most important field here is the "Data Source". Just provide a list of text values to be shown in the column.

The process of adding any other data type is very similar and straghtforward. Below you will find detailed fields description and full list of plugin events, actions and states.

➡️ Editable Table Element Fields

Field

Type

Description

Sorting

Yes/No

Enable / Disable column sorting

Pagination

Number

Default number of rows per page. Put "0" to disable pagination

Pagination options

String

List of comma-separated values: "10,30,50". Pagination options not shown if this value is empty

Search

Yes/No

Enable / Disable table search

Default column width

Number

This value can be changed in the insert column action

Column dragging

Yes/No

Movable columns (change order of columns)

Column resize

Yes/No

User can change the column width

Row resize

Yes/No

User can change the row height

Editable

Yes/No

Enable / Disable cells editing. It's also possible to make some columns read-only

Fullscreen

Yes/No

Table fullscreen mode

Context menu

Yes/No

Enable / Disable context menu (right mouse click)

Enable paste

Yes/No

Pasting data in cells

CSV Filename

String

This filename will be used when table data will be exported to a CSV. Do not include the ".csv" extension.

Include headers on download

Yes/No

Include (or not) column headers when exporting to a CSV

➡️ Plugin Events and States

Event

Related States

Cell edited

  • edited_value

  • edited_col_id

  • edited_col_title

  • edited_row_index

  • edited_record_id

  • edited_col_index

Rows inserted

  • row_inserted_after_ind

  • row_inserted_count

Columns inserted

  • col_inserted_after_ind

  • col_inserted_count

Rows deleted

  • row_deleted_from

  • row_deleted_count

Columns deleted

  • col_deleted_from

  • col_deleted_count

Table updated

This event triggers after any update: cell edit, row added/removed, undo/redo/paste etc

Other States (accessible at any time):

  • rows_nb: current number of rows in the table

  • columns_nb: current number of columns in the table

  • data: Table's data array (row by row)

➡️ Plugin Actions

Add column actions:

  • Add column: Text

  • Add column: Numeric

  • Add column: Image

  • Add column: Checkbox

  • Add column: Color

  • Add column: Dropdown

  • Add column: Calendar

  • Add column: Radio

Data management actions:

  • Clear all: Removes all the data, rows and columns

  • Show index column / Hide index column

  • Show column / Hide column

  • Add empty rows / Add empty columns

  • Set data: Destroy the table and rebuild with the provided data

Other actions:

  • Export CSV

➡️ Special Formulas

Plugin uses spreadsheet-like formulas (=A1*A2, =A1+A2 etc) and a few special formulas described in this section.

Formula

Description

Params

=PROGRESS(int, string)

Create a progressbar

@Param int percent - Value from 0-100

@Param string color - Hex color for the progressbar

=RATING(int)

Create a stars rating

@Param int value - Rate value from 0-5

=COLUMN()

Return the column number where the formula has been executed

=ROW()

Return the row number where the formula has been executed

=CELL()

Return the cell string identification

=VALUE(int, int)

Return the cell value based on the colNumber and rowNumber

@Param int colNumber @Param int rowNumber

=TABLE()

Return the table instance

PreviousAdvanced Dynamic Tables 🚀NextExport Page to PDF 🔥

Last updated