Comment on page
Advanced Dynamic Tables 🚀
Advanced Dynamic Tables for Bubble using DataTables.js
Populate your table with data and update data dynamically at any time. Update any table's option dynamically without page reloads. Includes sorting, search and pagination out of the box.
- Two styling themes
- Conditional formatting 🎨
- Large data support
- Row selection
- Columns reordering
- Populate your table with data dynamically at any time without page reloads
- Responsive table automatically adapts to any screen size
- Multiple styling options: hoverable rows, compact mode, striped rows, borders etc
- 84 languages included
- Row click event returns row id so you can edit / remove your data
- Advanced settings (enable/disable search for some columns, enable/disable sorting for some columns, ...)
Please check our demos and documentation for more features!
- Populate: provide data to the table
- Export: export table data to CSV
- Set Language: Change table language
- Refresh table
- Destroy: remove the table
- Order column: choose a column to sort
- Add Conditional Formatting
- Clear Conditional Formatting
- Row clicked
- Row selected
- Row deselected
- Column reordered
- Table drawn: table fully rendered on the page
- Clicked row (text): row unique id
- Search term (text): current value in the search box
- Selected rows: list of selected rows
Install the plugin and add a DataTable element on the page.
You have a bunch of options to customize your table. Most of them are dynamic which means you can change them at any time in your app (just like in our demo).
You should populate your table in the workflow. Call the "Populate" action (for example, from the "Page is loaded" event):
Define all the column names and data. Please note that the column data must be a string separated by the "," sequence (comma between double quotes).
Row IDs field is optional but if you are planning to use the "Row clicked" event (see below) you must provide it. It defines a unique ID for each row. Clicking on a row will trigger the "Row clicked" event which will provide a row id value.
Simply call the "Populate" action anytime when your source data is changed.
Plugin supports 2 themes: Default and Semantic UI. It also supports many styling options defined above.
Call the "Export" action from your Workflow:
Choose a filename and export format. Only CSV format is available at this moment. We have planned to add exporting to PDF very soon!
To use this event, you need to provide the "Row IDs" field when populating your table with data. Therefore each of your rows will have a unique ID.
Clicking on a row will produce an event "Row clicked" so you can catch it in the workflow:
Now you can access the "Clicked row" state with the row id:
You can access the current search term ("new york" on the image below) by reading the "Search Term" state.
Conditional formatting allows you to automatically apply formatting: font colors, background colors, font weight to one or more cells based on the cell value. To do this, you’ll need to create a conditional formatting rule.
Supported operations: =, <, >, !=, <=, >=, contains, doesn’t contain, startsWith, endsWith
Supported styles: font color, background color, bold font
1. Call the “Add Conditional Formatting” action, provide a column index, condition (operation + value to compare) and styles
2. Add one or several conditions to one or several columns
3. Call the “Refresh” action
Related action: Clear conditional formatting
A: If your data source is Bubble Database, first of all check your privacy rules. Also you can try to render the same set of the data (or just a number of found items) in another widget (text box / repeating group etc) to verify that you actually have access to the data.
A: The plugin supports HTML code as the cells value. As long as you can generate HTML data, you are able to customize your cells: