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
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
Last modified 5mo ago