Advanced Dynamic Tables πŸš€

Advanced Dynamic Tables for Bubble using DataTables.js

πŸ”— Links

​Demo 1(Default theme) | Editor​

​Demo 2 (Semantic UI theme) | Editor​

​Demo 3 (5000 records) | Editor​

​Plugin Page​

​Forum​

ℹ️ Introduction

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.

πŸ”₯ Main Features

  • 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!

πŸ“š Documentation

➑️ Plugin actions, events and states

Actions:

  • 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

Events:

  • Row clicked

  • Row selected

  • Row deselected

  • Column reordered

  • Table drawn: table fully rendered on the page

States:

  • Clicked row (text): row unique id

  • Search term (text): current value in the search box

  • Selected rows: list of selected rows

➑️ Add table on the page

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).

​

Option

Type

Description

General

Theme

Dropdown

Plugin supports 2 styling themes: Default and Semantic UI

​

Language

Dropdown

Table captions language

Search

Enable search

Yes/No

Enable or disable table searching

​

Limit searchable cols

String

Disable search on the data in certain columns. Comma-separated column indexes: "1,2,4"

Ordering

Enable ordering

Yes/No

Enable or disable column sorting

​

Limit orderable cols

String

Disable ordering for certain columns. Comma-separated column indexes: "1,2,4"

​

Default ordering (column)

Number

Column index (1,2 etc) that will be ordered by default. Can be empty

​

Ascending order

Yes/No

'Yes' for Ascending order; 'No' for Descending order (used for default ordering)

Pagination

Enable pagination

Yes/No

Enable or disable table pagination

​

Length change

Yes/No

Feature control the end user's ability to change the paging display length of the table

​

Nb of records per page

String

Possible options to choose for the number of records per page. Comma-separated values: "25,50,100". "Show All" option is inserted automatically.

​

"Show all" localization

String

If the custom number of results per page is defined above, this field allows to translate the "Show All" option if need.

Row selection

Selectable rows

Dropdown

Possible values are : Disabled, Single, Multi, OS. Multi and OS allows to select multiple rows in a slightly different way

​

Blur selection

Checkbox

Deselect the selected items automatically when the user moves focus outside of the table

Other

Show info

Yes/No

Show/hide table information display field (number of entries)

​

Reorderable columns

Yes/No

Enable/Disable column sorting

​

Hidden columns

String

Columns to hide. Format: "1,2,4" (comma-separated column indexes)

​

Horizontal scrolling

Yes/No

Enable horizontal scrolling. When a table is too wide to fit into a certain layout, or you have a large number of columns in the table, you can enable horizontal (x) scrolling to show the table in a viewport, which can be scrolled. This is particularly useful when you want to show the table on mobile devices

​

Large data

Checkbox

You may want to use this mode to render thousands of rows

Styles (all themes)

Striped rows

Yes/No

Changes background color of all the odd rows in the table. More info: https://datatables.net/examples/styling/stripe.html​

​

Cell border

Yes/No

Strong delineation between individual cells. More info: https://datatables.net/examples/styling/cell-border.html​

​

Compact mode

Yes/No

Reduces the amount of white-space in the default styling, increasing the information density on screen. More info: https://datatables.net/examples/styling/compact.html​

​

Row selected

Color picker

Row selected color

​

Control text

Color picker

Control text color

Styles (Default theme)

Scroll collapse

Yes/No

Allow the table to reduce in height when a limited number of rows are shown. More info: https://datatables.net/reference/option/scrollCollapse​

​

Hoverable rows

Yes/No

Highlight a row when the mouse is hovered over it. More info: https://datatables.net/examples/styling/hover.html​

​

Order column

Yes/No

Highligth the columns to indicate the sorting. More info: https://datatables.net/examples/styling/order-column.html​

​

Row borders

Yes/No

Strong delineation between rows. More info: https://datatables.net/examples/styling/row-border.html​

Styles (Semantic UI theme)

Inverted

Yes/No

Invert table colors

​

Table color

String

A table can be given a color to distinguish it from other tables. Possible values are: red | orange | yellow | olive | green | teal | blue | violet | purple | pink | brown | grey | black

➑️ Populate table with data

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.

➑️ Update table data

Simply call the "Populate" action anytime when your source data is changed.

➑️ Themes and Styling

Plugin supports 2 themes: Default and Semantic UI. It also supports many styling options defined above.

Check our Demo1(Default theme) and Demo2 (Semantic UI theme) to check how both themes look like.

➑️ Export table data to a file

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!

➑️ Row click event

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:

➑️ Search Term state

You can access the current search term ("new york" on the image below) by reading the "Search Term" state.

➑️ Conditional Formatting

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

Result:

Check out our DEMO 1 to see it in action.

Related action: Clear conditional formatting

πŸ™‹β€β™€οΈ FAQ ⁉️

Q: Why my data is not showing?

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.

If it doesn't help, most likely you should check the format of the provided data for every column (refer to the Populate table with data section)

Q: Can I add formatting for the cells 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: