Editable Data Table Like Excel Pro

Demo to preview the plugin:

Introduction

This plugin gives you an Excel-like experience for editing tabular data directly within your app. You can add, edit, sort, filter, and select rows of multiple types including, progress, rating, text, number and file. You can also customize table’s appearance by changing the color of elements and highlighting the rows on click. Editable Data Table is a powerful tool that can help you manage your data with flexibility and ease.

How to setup

Drag the element into the page and position it where you want to have the table.
⚠️
To allow the plugin to access the database, set privacy rules for the table you reference in the plugin.
Image without caption
⚠️
The plugin uses Database API. To give it access to the new data in the Database table, please enable Data API.
Image without caption

Table Element

Image without caption
Image without caption
Image without caption

Fields

Name
Description
Type
Type
The type of table from database where the data will be written to and extracted from
App type
Data source
List of objects from database to display on table
Dynamic value
Progress bar field
The name of the column that will serve as progress bar field
Static text
Reviews field
The name of the column that will display the rating stars
Static text
Header text
Arbitrary text to add to the header
Dynamic value
Footer Text
Arbitrary text to add to the footer
Dynamic value
Table name
The name of the table where the data is stored in the Bubble database
Static text
Row height
The height of the rows
Dropdown
Show gridlines
The gridlines should be visible
Checkbox
Striped rows
The rows should have interchanging background colors
Checkbox
Pagination
To display pagination
Checkbox
Rows per page
The number of rows to display on one page
Static text
Sortable
Make the table sortable on heading click
Checkbox
Removable sort
Should the 3rd click remove sorting?
Checkbox
Empty message
The message to display when the table is empty
Static text
Selection mode
How many rows can be selected at once
Dropdown
Editable
Ability to add and edit rows
Checkbox
Progress bar value
Show progress bar value
Checkbox
Progress bar value color
Progress bar value color
Color
Progress bar height
Progress bar height
Static number
Primary color
The color of the buttons, highlighted text, and more
Color
Highlight color
The secondary color used for additional highlight effect
Color
Alert on select
Show alert on select
Checkbox
Alert position
The position of the alert modal
Dropdown
Alert field name
The field to show in the alert as it appears in the database.
Static text
Image field name
Enter the name of the image column as it appears in the database.
Static text
Primary Color
The color of the buttons, highlighted text, and more
Color, Optional
Highlight Color
The secondary color used for additional highlight effect
Color, Required
Progress Bar Value Color
Progress bar value color
Color, Required
Progress Bar Height
Progress bar height
Number, Optional
Border radius
Border radius
Number, Optional
Rating Color
Rating Color
Color, Required
Rating Hover Color
Rating Hover Color
Color, Required
Header Buttons Hover Color
Color of the header buttons on hover
Color, Required
Rows Hover Color
Color of the rows on hover
Color, Required
Actions Buttons Hover Color
Color of the action buttons on hover
Color, Required
Pagination Buttons Hover Color
Color of the pagination buttons on hover
Color, Required
Last Selected Row Color
Color of the last selected row
Color, Required

Changelogs