Table component updates #13366
Replies: 12 comments 38 replies
-
|
What's been also removed is the Grid component that allowed us to position any components within an established grid. This was a very helpful tool for laying out our components however we wanted. In my case, I was requested to have our forms resemble the paper version of our forms and the Grid layout allowed us to do just that. Without it, how can we position components freely in the form to accomplish this? An example of what I used to be able to do with the Grid layout was something like this:
|
Beta Was this translation helpful? Give feedback.
-
|
Hey @Zergei64. The grid layout component was never intended to be released - it was something I had been playing around with as an idea, but it definitely wasn't ready for release. It was accidentally shipped in a PR when it shouldn't have been. I'm very glad you found it useful though! We will eventually circle back to it and improve out layout further, but it's not on the immediate radar. |
Beta Was this translation helpful? Give feedback.
-
|
I really miss the "old" table. The new style is very limited when used with a query. It is really much better when editing directly in a table, but with query the old one was really much better in my opinion and it is very sad that I cannot use the old one anymore. Old |
Beta Was this translation helpful? Give feedback.
-
|
You drag the edges to resize them, just like resizing columns works in most other tables. This works anywhere there is a table - both the data section and in apps. |
Beta Was this translation helpful? Give feedback.
-
|
Got it. Apparently, it can only be done through the published app and it seems like the columns width config won't be saved throughout reloads. It would be cool that columns' widths are saved locally or something like that or at least that the columns take mínimum width so things can fit in. My id columns take some more space than needed. But I think it's a good change towards a good direction |
Beta Was this translation helpful? Give feedback.
-
|
It no longer seems possible to adjust the column width for all settings. It is also apparently no longer possible to store colors. In addition, the formatting of a column can no longer be changed. Furthermore, the index column can no longer be hidden, which I personally find superfluous as it only takes up space. |
Beta Was this translation helpful? Give feedback.
-
|
@AlfreddGco the column width config is saved based on how you configure the table or view in the data section. Any changes you make to column order or size are saved. There are some presets above the table in the data section - you might prefer setting them all to "small" for a more compact look. Or just drag to whatever size you want. When used in apps, users can still reorder or resize columns as they like but this is not saved so they don't affect the settings for other users. |
Beta Was this translation helpful? Give feedback.
-
|
@Sagestum the index column can be any column you choose - it's whatever data you want to show as the main human-readable information about each row. You can change this to any column you want by choosing "Use as display column" in the column dropdown in the data section. This does not need to be a primary key or ID. |
Beta Was this translation helpful? Give feedback.
-
|
Any timeline on when this change will be reflected in the documentation? New to Budibase and have been trying out the "Tutorial: Building a HR portal" on this doc page, and got derailed at the Employees Screen section. |
Beta Was this translation helpful? Give feedback.
-
|
To me this feels like a major step back. With the old table you could comfortably fit 4 columns on a phone screen and have it look clean and useable.
Unless I am missing something, the only way to have a table of data that can be properly viewed and navigated on mobile is to build it yourself out of cards and a repeater. |
Beta Was this translation helpful? Give feedback.
-
|
@04nd01 would unpinning the display column solve your issue? That would look like this: Screen.Recording.2024-04-17.at.09.14.07.movThe gutter is still pinned to allow you to select rows for deletion, as well as add rows if you have that configured. But this would free up a lot more space. |
Beta Was this translation helpful? Give feedback.
-
|
I think the new table is still quicker to show additional scrollbars instead of just extending to accommodate the content, which doesn't seem like the best option for a mobile phone display. |
Beta Was this translation helpful? Give feedback.
-
|
Maybe that's just preference, but I think scrolling and seeing the full values for each column is much better than seeing a few truncated characters for each column and not having any way to see the full value. It supports touch events to scroll, so you don't need to use any scrollbars - you can just touch and drag like you'd expect. It's very fast. |
Beta Was this translation helpful? Give feedback.
-
|
I tested a bit more. The table always has a vertical scrollbar that will scroll up and down a few pixels, even if the content is much smaller than the vertical space available. As soon as the width of the content hits around 60% of the available width a horizontal scrollbar will appear. It would make more sense for the scrollbars to appear when they are actually needed i.e. at the moment the content exceeds the size of the table. |
Beta Was this translation helpful? Give feedback.
-
|
Scrollbars do only appear when needed. The table includes padding at the bottom and right size to account for the size of popovers that are rendered for certain cell types - like options, relationships, long form text etc. |
Beta Was this translation helpful? Give feedback.
-
|
The grid view is more similar to Data Tables than desirable, horizontal scroll bars don´t look nice on apps. Also yes, the index column is unwanted. One thing I was wrong about. I was able to create search boxes for grid tables: |
Beta Was this translation helpful? Give feedback.
-
|
The index column can be any column you choose - it's whatever data you want to show as the main human-readable information about each row. You can change this to any column you want by choosing "Use as display column" in the column dropdown in the data section. This does not need to be a primary key or ID. |
Beta Was this translation helpful? Give feedback.
-
|
Who thought this update was a good idea? |
Beta Was this translation helpful? Give feedback.
-
|
@kasgithub8 I'd also just like to point out that we did not break any existing tables. We never change existing apps and this is no exception - all your old tables will remain unchanged. The change only affects adding new tables going forwards. There are many more features in the new table compared to the old one, but yes we did remove very little used features like background colours for entire columns. |
Beta Was this translation helpful? Give feedback.
-
So yeah, features I would want to see back would be column sizes adjustable inside the component & custom containers and components inside the table or being able to display different buttons on conditions! Edit: and the buttons in front of the columns not at the end, even though they're sticky Edit 2: And easier Table CSS back, I can't seem to find the class for every table header now. I used to have a background color in the header. |
Beta Was this translation helpful? Give feedback.
-
|
It's per column, the same as it was for the old table. You can still drag and resize the columns in the app, but this setting will set their initial width (and override the saved width from the data section). Thanks for clarifying what features you'd like to see. |
Beta Was this translation helpful? Give feedback.
-
|
@aptkingston now my old tables are broken even on pages I didn't touch. Plus, when I upgraded to 2.27.1, the new tables only showed 2 out of 6 columns were displayed in the table. When I rolled the app back to the older version, it worked again. |
Beta Was this translation helpful? Give feedback.
-
|
@kasgithub8 we have not made any changes to the old tables in recent updates, so it sounds like something else is going on. Could you please raise an issue with more details and screenshots? That will help us look in to your issue. |
Beta Was this translation helpful? Give feedback.
-
Let's compare the two. Up is the old one, down is the new one. Which do you prefer?
here options for columns: Old
...so at this stage it is much better than the old one? Maybe in some cases... but in my case it is quite inferior to the previous version. |
Beta Was this translation helpful? Give feedback.
-
|
You're right that there were more settings on the old table, but they really weren't useful (other than width and value, but formula columns are the correct way to transform values into something new). The settings for background color and text color applied to an entire column (rather than being conditional on the value of a cell) which means there are no use cases for them other than wanting a multi coloured table like in your screenshot. We're adding back a width setting (#13610) so you'll be able to customise widths for each table to be something different than your data section widths. So just to clarify, you'd like the static color settings added back? |
Beta Was this translation helpful? Give feedback.
-
|
well kind of a yes kind of a no, I really like to add color to tables, but on a condition would be the best possible option, but I don't know if this would be a possible option. |
Beta Was this translation helpful? Give feedback.
-
|
Always start a new app using a copy of an old one, delete everything but one old table that you will be able to copy inside the app. I was forced to do that for a table that I intended to use in a modal form, the result with the new tables was very bad so I started using this way. |
Beta Was this translation helpful? Give feedback.
-
|
Hi @jamie-budibase @aptkingston , I also thing the new table is kind of a mixed bag, maybe it was a bit too early to force using it as a full replacement of previous (and quite limited table). I fully understand the extra-cost of maintaining old and new components, and that new components might be much better for maintenance and evolution, but the transition was quite brutal if I may. On my side, the points below are the one preventing me to replace my existing tables with new ones. - Ability to embed components in first column : - Display Column pinned as first column - No column/cell colors Thanks for your attention :-) |
Beta Was this translation helpful? Give feedback.
-
|
I am new to Budibase... so I might be missing something... Update: Indeed I found out because of the Table update |
Beta Was this translation helpful? Give feedback.
-
|
Buttons inside table component are now floating around. This is so ugly.
|
Beta Was this translation helpful? Give feedback.
-
|
I'm not sure what you mean by "floating around". They are sticky at the right side of each row so you don't need to scroll to see them. How they look is up to you - you can change the labels and variants if you want. |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for your answer. That's what I meant. Maybe it's better to show how it looks in practice. The first GIF shows the old table with buttons, while the second one shows the new table with buttons. In the second case, the table is unreadable and cluttered, the rows of the table are not readable at all. While in the first GIF, the table is clearer, the interface is cleaner. This is especially visible when the application is accessed via a mobile device. I really think you should revert to the old form of the table.
|
Beta Was this translation helpful? Give feedback.
-
|
Thanks for providing those gifs - that helps a lot. That definitely looks like an oversight on our part. We just need to stop making the buttons "sticky" on mobile. We do this same thing for the display column, which is sticky on desktop but not sticky on mobile. Doing the same thing for the button columns looks like a good idea. |
Beta Was this translation helpful? Give feedback.
-
|
Hi, when will this be solved? |
Beta Was this translation helpful? Give feedback.
-
|
My organization uses Budibase, I have left tons of bug reports and posts on community discussions helping people to do things or giving ideas. I am starting with this just to say that I like the tool and most of the stuff that it offers. We self host. I froze the version in the docker compose at around 2.17 because Budibase was changing too much and changes would periodically break things. We have recently made a copy of our install and run an update there, to see how BB is looking and if we could move things to version 3. We see that the tables, which were powerful before, are now quite weak. Things we cannot do anymore:
Yes, I know that the new table saves directly to the DB, but that works only if you don't use a custom backend. (we dont expect BB to be able to do that with a custom backend, we also save things through the backend). Also, that feature only makes sense in very simple scenarios. In most scenarios, there are fields which should not be editable like that, or changing one field should change another, all things that can get broken by somebody writing directly in such a table.
It is true that the app is not broken, the old tables still work. But it means that if we want to have tables with the functionalities that we need, we will need to copy paste the old tables, and it feels kinda scary, to depend on a non supported feature anymore. We see that some of the stuff could be done through the SuperTable component, we are testing. We would like to jump to version 3 because we do see lots of improvements in other parts of Budibase. Does anyone shares these issues? Do you see yourselves adding back the capacity to have form fields and links inside tables? @aptkingston @joebudi |
Beta Was this translation helpful? Give feedback.
-
|
Hi @AlejandroFNadal, You mentioned a great point with having to rely on a non-supported feature. |
Beta Was this translation helpful? Give feedback.
-
We’ve updated how we treat tables in Budibase. You may have noticed we have a few different ways to make tables with the Table component, Table, Block, Grid Block, etc. It can get a little confusing, so we’ve decided to consolidate.
What does this practically mean?
If you’re using the Table Block or Grid block in your existing applications, then no worries - everything will still work as expected. However, moving forward, you’ll have to use the updated Table component.
Beta Was this translation helpful? Give feedback.
All reactions