Forum Academy Marketplace Showcase Pricing Features

[New Plugin] Dragtable & Dragtable Plus

Hello there,

I wanted to introduce two new paid plugins: Dragtable & Dragtable Plus. As the name implies, Dragtable lets you create a draggable table. Dragtable Plus (pictured above) lets you incorporate elements into your table cells, beyond just text. Both plugins work inside standard repeating group, which makes them flexible to use. You can also save user changes to the table into the database and reload them. Necessity is the mother of invention and a user-adjustable repeating group has been sorely needed for some time. Dragtable is a fairly heavy duty effort. It stands on top of its own custom-built Javascript library and everything was built from the ground up to work with bubble. I’ve found it incredibly useful and hope others do as well.





SETUP VIDEO:

9 Likes

Looks like some good stuff.

@simon this would be useful for the project we wore working on before.

This is great. The only thing that would make it better is if we could move the rows, too.

I’ve seen plugins that supposedly do this. Not clear they would be compatible with dragtable. Could you elaborate on your specific use case for this feature? Right now the order of the rows are determined by the sorting order of the rg’s search results. You can sort the rg by clicking the header. This makes dragtable manipulate search results in way that’s very familiar and and which has been around since at least windows 95… what’s old is new I guess. Very useful for CRUD applications.

It sounds what you need is something different. Like being able to reorder and reindex a list of things (that are constantly sorted by that index)

Dragtable is a great way to organize a list of things by individual properties in way that’s flexible and familiar

Sorry I was too late on this :slight_smile:
Nothing is ever as easy as it seems, BUT it is an easy lift to integrate this into an existing project.

Saves a ton of time setting up all these individual customized search views to meet every need.

So, I might need to reorder an expense line to match with a client’s Profit & Loss Statement that is not ordered alphabetically or by account number, so it would be nice to drag and drop rows rather than have a numbering system that would require either decimals or to renumber every subsequent row manually or with a complex workflow (which I have seen done before).

I see. It sounds like the ‘draggable’ plugin might solve this. I’ll look into seeing if this feature could also be integrated into dragtable as well.

2 Likes

Hi. Thanks, plugin looks good. Could you pls fix the editor view? Need to know how do you let users to choose fields. And also - is it possible to place an image in the row?

If you are referring to how the plugin renders inside the editor, please send a screenshot of your issue. I will occasionally get an issue where the preview won’t render correctly. Usually updating one of the settings in the plugin forces the preview to refresh and fixes that. I’ve discussed this issue several times with bubble support.

Unfortunately i’ve not gotten a response from bubble that has been helpful. The only other option I see is to change the preview mode to a just be static image inside the editor and loose ability to preview the columns at all. I think its worth the quirks for now until this can be resolved.

Have you taken a look at the editor view of the demo page? This shows how you can use checkboxes + workflows to let users pick and choose the fields / columns to be displayed

Yes. There are two ways to do this.

With dragtable standard you can use the [img] BBCode tag for the cell data to display an image URL.
WIth dragtable plus, you can place an image element inside your repeating group, give it an ID, and then put that ID as your cell data. This will render the image element inside the cell. Dragtable plus gives you a few more features for formatting the way the image loads, whereas dragtable standard you get whatever BBcode can give you.

@jon2 is there a way to make text elements wrap according to the parent column width? As it stands, wrapping only happens when I narrow the page dimension, or set a fixed width for the element.

Wide page with no fixed width:

image

Narrow page with no fixed width:

image

Wide page with fixed width:

image

1 Like

@afuturehead I’m pasting my response from my PM to you in the public thread for visibility


Short answer: Yes, but be aware of row-height issues.
Here is an example:

Excuse the long-ish answer, there are a few ways to approach this and can be a little quirky. This requires a little bit of HTML/CSS to implement (read below and see example app) and is on the more advanced spectrum of drag table implementations. Depending on how you proceed there may be a little fussing to get it to behave exactly the way you want.
Good luck!

HOW TO WRAP TEXT

  1. Place your a bubble text element (or any kind of element displaying text) on the repeating group row
  2. give that element an ‘id’ with a unique name and an index
  3. use dragtable pro to target that element’s id inside the column body data fieldand to move it into the table cell column.
  4. finally, specify CSS for that element by adding / and then your CSS after the element id in the column body data field
    read the documentation on the column body data field or below
    Example for maximium width: #_myTextElement-current cell's index/width:100%

This will give you text with variable height rows that adjust to content length. The behavior for height resizing is iffy

ABOUT THE HEIGHT ISSUE
If you were to slide the the text column to make it skinny and therefore increase the height of the text content, the behavior for changing the row height (in real time) is quirky. It often doesn’t adjust quite correctly, or is ‘late’ to get the proper height. Drag table pro basically shoehorns elements into arbitrary positions on the page and bubble doesn’t really ‘understand’ what is going on there. Although this isn’t a problem when the element height is already set by bubble, it becomes an issue when you try to resize the column width and trigger a height change to the repeating group row in real time.

TEXT WRAP OPTIONS

  • set a fixed height for the text element rather than relying on dragtable to auto-size the row in real time.
  • set a fixed column width so user cannot resize and let the rows be resized automatically by bubble based on content length changes of the element (this works fine)
  • accept that text may be cut off, set a row height tall enough to allow for text lengths you’d want.
  • If you want to try a fixed height text element with the ability to scroll vertically, you can try using an HTML element to display your text rather than a text element. Bubble will auto grow the row height to meet the height requirements of a text element placed in that row. If you use an HTML element then bubble ignores the content and will size the row based on how it is drawn in the editor. (note; setting ‘clip text height’ for a text element in bubble will just truncate the text.
    Add the the CSS code /overflow-y:scroll; display:block; width 100% after your HTML element ID for that row. This will create a scrollable HTML element for the text content to scroll within. My recommendation is to also set the height of this element in CSS as well such as adding height:40px

DOCUMENTATION EXCERPT:

[text] list of body column data separated by delimiter (default is , ). accepts BBCode rich text formatting . a single value (no delimiters) sets the value for all columns. To place an element inside a column: (1)Place element inside repeating group (2) set the element’s ID so it is UNIQUE for each row by including the dynamic expression “current row’s index” in the ID name . i.e. my-input-[current row’s id] . This will result in separate ID being generated for each row such ‘my-input-1’ for row 1 and ‘my-input-2’ for row 2 and so on. (3) Type in the Column Body Data field for the column you want. Use the prefix "#_"to let dragtable plugin know to expect an element ID rather than text. (4) Type the name of the element ID and the dynamic expression “current row’s index”. I.e. what you type should look like #_my-input-[current row’s index].
ELEMENT STYLING (ADVANCED): Different elements will ‘behave’ differently when they are moved inside a table. By default, we set the styling of elements to act like inline text, meaning they will respond to horizontal and vertical alignment alongside regular text. Dragtable doesn’t resize element. The size that they are drawn on the page will be kept when the element is moved into cells. You may want to apply your own CSS styling to a given element to override the bubble and plugin defaults ( this is advanced /experimental). Depending on the element, it may not be able to be styled. This is because complex elements often have several ‘sub’ elements that need to be styled individually and the plugin isn’t capable of that. To perform general styling to an element add a slash ‘/’ after the id and then your CSS. i.e. #_my-element-[current row’s index]/height:20px; display:inline-block. The default styling is allows most elements to be easily placed inside a table cell that can be resized. By default, dragtable does make changes the height / width of elements. It uses a “display:inline” parameter to let elements behave like text and to keep the same alignments as defined in the plugin. There are two special dynamic parameters that you may use {{height}} and {{width}}, which return the current inner height and current inner width of a cell (not including padding) in px i.e. {{width}} = 400px; i.e. #_my-input-[current row’s index]/height:{{height}}; width:{{width}}

Hi there!

First off, this plugin is AMAZING. I’m very impressed with the feature set and the customization available, especially working within the limits of Bubble. Probably the most impressive UI plugin I’ve seen on Bubble! You have made an advanced UI element simple and painless for those of us with little ability to code. Well worth the money!!!

I do have some questions/observations I’m wondering if there’s anything to be done about:

  • I have noticed that the speed of loading data into an input element (within a cell body) when sorting slows down considerably when there is a large number of “things” (over a hundred). Is there anything that can be done to try and speed up this processing? It’s not so noticeable when there is only a handful of things. But with my particular app, there are situations where the user may be loading a hundred or more items, and the speed really slows down when sorting. (I know, it’s not ideal to have more than a hundred items in a repeating group, but a standard repeating group seems to be able to sort the same amount of data much quicker.)
  • Is there any way to be able to create a row/group that is JUST the column headers? Without any rows? I know this may sound like an unnecessary step, but the way I’m trying to build my UI, it would super helpful to have a separate object for ONLY the header columns that is then linked to the main table rows.
  • I noticed that horizontal border lines for the BODY seem to get their color information from the HEADER border color input, instead of from the body border color input. Not sure if that’s just a bug? Or perhaps there’s a reason for that… Thought I’d mention it.
  • I know the horizontal scrolling feature is in “beta”… So far it works fairly well for me. The only thing that I miss is having a horizontal scrollbar that appears at the bottom, so that I can click and drag if I want to. (I realize this may be a difficult task to accomplish within the constraints of Bubble world, but just thought I’d throw it out there)

If it’s helpful, I can send a link to my app-in-progress to explain some of the things I’m talking about.

Again, I’m very impressed with what you’ve accomplished with this plugin. It basically makes my entire app idea possible in bubble. If you ever need someone to do more testing for future versions or give other feedback, let me know, I would be happy to help. Again, I don’t have a ton of coding knowledge, but I’ve certainly become pretty knowledgeable of the Bubble environment.

Thanks very much!

If you can DM me a editor link, I’ll take a look.

Hi @jon2,

I’ve emailed you but if you respond quicker on here I’ll PM you.

Ash

@jon2 Thanks for this plugin. Seems to work quite well so far.

The only problem I run into is related to adding additional information on the first line of the repeating group. In my case the ability to delete that cells info.

As per the screenshot you can see that the first row shows up on the header line instead of the first line of the body. Any thoughts?

Screenshot 2021-03-15 at 13.10.54

The only other question is whether it would be possible to change the font between the body and the header?

Thanks
T

Hey there!
I can’t see the “ID Attribute” Field at the bottom of the Tragtable Main A Element.
What I am doing wrong?
Thanks in advance!

Have you enabled element ids to be exposed in your app? This is done in the app’s settings page in the editor.

Hello,

I am interested in installing the plugin but I wondered if there was a way to implement a search box or column filters to filter some information displayed in the table?

Thanks in advance

Kevin

I’m pasting my reply to your email here as well so others can see it :slight_smile:

First, I wondered if there was a way to implement a search box (or column filters) to filter some information displayed in the table?

Dragtable ‘rides the rails’ of a standard bubble repeating group. So what is actually going on is the bubble repeating group is searching your data and dragtable formats it to look like a table. Each row contains a separate dragtable element that displays data for that row. This means if you can do it in a repeating group, then you can do it in dragtable

Moreover, I need to select several rows in order to trigger workflows on all of them (for instance, send an email to the users selected). Is it possible to do so?

Following up on the theme above ‘if you can do it in a repeating group, you can do it in dragtable’ so the answer would be yes. The following information a little outside the scope of dragtable, but I’m happy to try and get you going!

  • You would need dragtable plus so you can incorporate bubble elements (like a checkbox) inside your drag table.
  • Place a checkbox into the repeating group, give it an id, and put that id into dragtable for your row configuration so the checkbox will be integrated into your table (see the example app for dragtable pro where elements are used inside a table cell)

Here’s a bubble trick on how you can keep track of selecting multiple things in a repeating group (BTW this applies to selecting multiple items any repeating group not just dragtable)

  • Create a page state that is a *list of things (*whatever the type of thing is in your repeating group results)
  • Create two workflows both using the trigger when an input has changed and select the checkbox element that is inside the repeating group row.

Workflow #1 conditional = this checkbox is checked
step 1: set a state (your list of things) = your list of things:plus item checkbox parent group’s thing
Workflow #2 conditional = this checkbox is unchecked
step 1: set a state (your list of things) = your list of things:plus item checkbox parent group’s thing

Summary: anytime the checkbox for a row changes the workflow fires. If it is checked we add it to our list of checked things. If it isn’t we remove it from the list of checked things. Then you can do work on your state list of things

If you are having trouble following this very brief explanation on selecting multiple items in a RG there are several how-to’s on the forums about how to accomplish this. Again it will work with dragtable.

What you are attempting to do here with selecting multiple rows is fairly standard (I do it in my own apps). It is however slightly advanced since you are using dragtable page elements in dragtable and bubble logic. I would recommend taking a good look at the dragtable plus example apps and the editor page. The dragtable configuration window in the editor has lots of documentation that will prove to be very useful.