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.
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
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.
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.
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
Place your a bubble text element (or any kind of element displaying text) on the repeating group row
give that element an āidā with a unique name and an index
use dragtable pro to target that elementās id inside the column body data fieldand to move it into the table cell column.
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}}
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.
@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?
The only other question is whether it would be possible to change the font between the body and the header?
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?
Iām pasting my reply to your email here as well so others can see it
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.
