[NEW PLUGIN] Advanced Grid

Hello Bubblers!
We’ve just published a new plugin:

Advanced Grid

Advanced Grid gives you the ability to display Data Tables as in Excel.

Create interactive data tables using sorting, searching, pagination, filtering and more. This plugin is really easy for beginners.
There are several ways of functional and visual customization of the tables.
com-video-to-gif

Features:

  • Columns can be switched places with drag and drop + the width of the columns can be controlled
  • Different ways of searching
  • You can save tables in Excel, PDF and CSV
  • You can also send it to print
  • Add, Edit and remove lines
  • Pagination + you can control the amount of pages that should be shown
  • 20 different color schemes

Demo:
For details and demos please visit this page
https://plugin-preview.bubbleapps.io/version-test/grid

Plugin page:

If you have questions, reach out to us at contact@mindforapps.com
We appreciate your reviews and suggestions.

Cheers
Jay | Mindforapps

12 Likes

Very cool! I would love to have a more robust, material-like, table component. Like one of these. :slight_smile:

https://devexpress.github.io/devextreme-reactive/react/grid/
https://www.material-ui-datatables.com/
https://mbrn.github.io/material-table/#/docz-examples-15-example-editable

1 Like

Good looking stuff…

Questions:

  1. Is there a way to change the max number of rows? Right now it is set at 10 and that is pretty limiting.

  2. Can it be filtered by drop-downs? I didn’t see that option when I had to use the join with option.

1 Like

Hi Josh,

And thank you for your feedback.

Regarding those questions:

  1. You probably mean the number of columns, we can add more if required, please let me know how many do we need to add?

  2. What do you mean about the drop-down filtering? We need more details here.

Hi. I have the same queston…

In my case, the number of ROWS is preset to show only 10. Regardless of how many are set to be viewable, only 10 show. You must scroll to see all the rows. Changing the number of rows visible affects only the pagination, not the number of rows the user can actually see at one time.

Does that make sense?
Thx.

I’m actually talking about rows and not columns. Limiting to 10 columns is a problem when looking at large data sets, but It is more forgiving then 10 rows. Having only 10 rows makes it unusable for looking at user data since it would require too much scrolling from the end-user.

As for the 2nd question, we use several dropdowns to filter repeating groups for the end-user. This lets them pull their own custom reports. I could see any filtering options when using your plugin.

I don’t want it to seem like I’m negative! In fact, I think you are on to an awesome idea!! Just need some refinement.

That does and it is one of the main issues I had. I think it is a really cool idea that solves many problems. I’m just seeing some issues with usability like the row scrolling.

I would also like to see mixing of data types in the future. I was able to get search to work within the table even though I can do it in repeating groups.

The row issue can be solved by making the plugin size bigger in height.
Hope this helps :slight_smile:

2 Likes

I want to use this plugin so bad! When I set it up, it looks like this:

I think I’ve set it up right…

Help :*(

Hi Richard,

Thanks for the screenshots! What you can do right now is:

You have an interesting side plugin in your application , which changes all the elements in the table. This plugin add a css code to the page with this:
table, th, td {
border: 1px solid black !important;
width: 40px !important;
}

On the page which you show as a demo you also have the Air Date/Time Picker and it also has some issues. It has a black grid and is moved to the left.

If you remove this css code then the table elements work perfectly fine, both the Advanced Grid and Air Date/Time Picker.

Most probably that this line of css code is added by the Text Editor plugin. Try to remove it from the app and see if everything falls into place.

1 Like

Good Tip. I’m going to try that and see if it works.

Before I buy this plugin can you let me know if it possible for me to create a table if the field type is a different data type?

Hi,

What data types are in question exactly?

Best,
Jay

Oh man that worked perfectly! Yes it was an old code from an old plugin that I’d forgotten to remove. Thank you so much! This plugin is amazing.

We are very glad that we could help.

1 Like

screenshot

For example see the Address table. The vendor fields type refers to the Vendor table. Will it be possible for the Vendor to show up in the table I create?

Hi Diamond,

You were asking about if there are two database tables will they be visible both.
We’ve decided to add an additional table into the database and called it Vendor just for you.

In the Vendor Table there are two different fields - text (VendorName) и number (VendorPID)

Everything is connected and working. You can preview everything on the demo page From there you can go to the bubble editor and see how it is all connected in the Data tab – Identity and Vendor tables.
Hope we could be of help.

Have a great bubble experience.

Best,
Mind For Apps team

In your demo, double click on column (to extent it or adapt it), it freeze the app (on Chrome and OS 10.14).

Thank you so much! Very helpful

1 Like

Can we have 20 columns for my grid?