💾 New plugin - dataTables - Updated: 09/23/2018 -- NEW DESIGN!

A very advanced plugin that gives you the possibility to use dataTables with your Bubble database!
https://puu.sh/Bbive/07812da9e6.gif

Extremely easy to use, configured and optimized.
Also includes search, filtering, sorting and much more!

Link to plugin: Excel Table / Data / Grid Plugin | Bubble
Documentation, demo & editor: Excel Table / Data / Grid Plugin for Bubble | Zeroqode

Update: 08/11/2018 – Added on-click workflow event!!
Update: 08/12/2018 – Added +70 languages.
Update: 08/14/2018 – Fixed some errors & bugs.

Update: 08/23/2018 –

https://puu.sh/Bj4Xt/876b407226.png

  • Now dataTables support multiple values in the same row separated by commas.
  • Now empty fields are supported. Not required space anymore.
  • Added compatibility with bubble filters.
  • Improved stability with Bubble DB.
  • Now searching on dataTable will also search on all multiple matched values.

Dear customers, today we release the version 2.0 of our dataTables, which adds an incredible potential to the plugin. As this is a big update, the custom javascript code that reads and parse the bubble database has changed.

How works the new database?

  • Exactly as was before but with one difference: it’s required to add join with “,” after our search.

Example:
https://puu.sh/Bj4GN/6d353d44cc.png

Bubble adds his own " " after our “,” so the result is: “”,“”

– Demo page & document has been updated.
Please check all this info before updating your plugin to the last version because if you use it with the old search it will cause errors on your page.

Update: 08/30/2018 –

  • Added support to multiple dataTables on the same page.
  • Bug fixes.

Update: 09/06/2018 –

  • Bug fixes.
  • Live edits are now supported:

Update: 09/15/2018 –

  • Added export options: CSV and PDF.

https://puu.sh/BvwWf/8946fd4e58.png

Update: 09/19/2018 –

  • New dataTables design!!.
  • Activated again lenght menu.

Old design:
https://puu.sh/BxjUb/c77f9255d9.png

New design:
https://puu.sh/BxjWc/c11421b648.png

Update: 09/23/2018 –

  • Now dataTable supports empty DB or empty searches.
  • Changed Row selector to a drop-down
  • Improved responsive layout settings
  • Added new feature to table options “Scroll collapse”:

Demo: https://redubleplugins.bubbleapps.io/datatables

Update 20-th of Feb 2019:
This plugin has been acquired by Zeroqode - for any support queries please mention @ZeroqodeSupport in your post

Update: 07/22/2020 –

  • Fixed Refresh a Table action

Update: 08/07/2020 –

  • Modified standard table styles
  • Deprecated max height and auto resize proprieties in dataTable element.

Update: 09/18/2020 –

  • Added optional Font propriety in dataTable element.
    Important:
    Make sure that the font name is written correctly, ex: Arial, Tahoma
    If there are several dataTable elements on the page, you can set for them different fonts.
    If the font is not one of the standard browser fonts or has not been used on the page before, the element will fall back to the standard font.
  • Added optional Focus color propriety in dataTable element for the Search input.
    Important: If there are several dataTable elements on the page, only one focus color can be set.
    Colors are set in HEX value, ex: #EB4034, #12A83D
  • Removed deprecated propriety fields from dataTable element
19 Likes

Great ! Please add translations, and workflow on row click

1 Like

Added to the road map of the next update. Thank you :wink:

1 Like

You can’t imagine how many hours I would have saved on my projects having this plugin available in the past.

I’m happy that I don’t have to worry about creating all that with Bubble native logic anymore while keeping the app tidy and workflows to a minimum.

Looking forward to that workflow action on click.

3 Likes

This is awesome! Great work :slight_smile:

2 Likes

Great work and will definitely save a lot of time recreating tables in every app!
Couple quick questions around it:

  1. Responsive - I noticed it is ‘squeezed’ and allows for left right scrolling, which is sometimes preferred, but can it also allow for rows disappearing as the screen shrinks?

  2. When you increase the number of entries in the list i noticed the element does not expand, rather a scroll bar appears, can that be adjusted to expand the element height?

Both of these are on the main example on https://datatables.net

3 Likes

Thanks, @JonL, yeah definitely I will try to add that soon as possible.

Thank you @romanmg!!

Well in Bubble this is a bit more “special” to do. Mainly the problem here is the fact when using a small database its okay if the element keeps resizing, but when you have +100 rows converts in an infinite scroll table. That’s why I created the bars and did the element with a fixed size.

But may I add both options, so the user can choose which one he prefers.

1 Like

Wow this will be such a massive time saver.

I spend so much time fiddling with RG to make then look right.

Well done @yusaney1

4 Likes

Important update: 08/11/2018 – Added on-click workflow event!!
@JonL @hola1

Updated thread.

2 Likes

@yusaney1 i understand the need for the Unique ID in regards to the ‘click row’ but is this mandatory if the click row is NOT required? when i beta tested it…i was able to populate this with API returned data

2 Likes

Hello @Bubbleboy, I have to agree with your case.

I’ve updated the code: So now the uniqueid it’s ONLY mandatory if you want to use on-click event.

In your case, you only have to check this new “Show first row”.

Regards.

2 Likes

@yusaney1 sweet Redu fast work and outstanding plugin …i have to say the horizontal scroll bar when responsive is a stroke of genius.

3 Likes

Thanks @yusaney1

Outstanding support and very quick turnaround.

1 Like

I’m a bit lost. When would be better to use it instead of repeating groups? I mean, what are its use cases? I do use a lot of RG in my app but I don’t know what to do with this plugin and am afraid of miss out on something to make my app better.

1 Like

Hello @vini_brito, well basically this plugin gives you the full control of the table:

  • You can order per any row without the need of creating complex search/display data.
  • Adds a native search which is extremely fast, you can search in any of the rows of your table.
  • You have only to draw it to the page and your table is created.

This saves you a lot of hours on creating a decent table using RG.

3 Likes

Update: 08/12/2018 – Added +70 languages.
@hola1

Updated thread.

1 Like

Lot of hours is an understatement. Just implementing the search and ordering is a pain in the ass. I’ve spent at least 20+ hours in my last project to get a decent RG with dynamic sorting, search and pagination.

Might seem easy to achieve, but when you want all of it (displaying, sorting, pagination and search) to work seamlessly it is when you truly appreciate the existence of a plugin that does this for you.

And if you don’t get right your RG Datatable before you start copying and pasting your custom element and then you find a bug…good luck maintaining them :slight_smile:

25$ is a steal.

3 Likes

@yusaney1 Purchased - I had just mentioned this in a prior forum post… So this was the easiest purchase decision I’ve made in a while.

The base functionality here is great. Just the sorting and search mentioned by @JonL is enough to justify the $25.

Request: More control over what we can place inside of a row (if even possible with dataTables!):

  1. The ability to add buttons inside of the row (rather than upon clicking a row) and assign them to an action such as “Edit” and “Delete”.

  2. Additionally, in some rows, I place icons to indicate importance, and some, I place smaller text with different styles - some is italic, some is different color. It’s all seen in the screenshot I attached.

If the functionality from this screenshot could be achieved with dataTables, it’d be the nail in the coffin in my opinion!

6 Likes

Thank you very much for your purchase @w.fly

We take very seriously the recommendations and reviews of our customers, so we will add this to our roadmap for the next update.

Regards :wink:

2 Likes

I’m going to demo this today. Can we style the tables to fit our apps?

Excited about this one

1 Like