💬 WeWeb team needs your feedback: Data Grid/Table

Hey everyone!

Many of you already know that we’re spending a lot of time on rethinking our basic elements, with the Radio Group coming soon!

Now it’s time to learn more about everyone’s problems, use cases and everything related to Data Grid and Table

You need a feature? You need more design freedom? Something is not working as designed? Write below!

4 Likes

for feature request, see how we have the option to reset multiple variables in just one wrapper, that would be useful for adding values to variables too, select multiple variables in one place instead of separate multiple actions!

The table Component needs an empty state component instead of doing conditional displays, when empty it should render a “no record found” Text at least

If possible it would be nice to allow dynamic paths for the tables incase someone wants to generate dynamic tables or work with dynamic variable paths

1 Like

Ohhh, I have many things to say.

I try to avoid this element, because it’s:

  • extremely slow (somehow item collections work faster)
  • non adaptive (for most properties media-styles are not applied on change appearance)
  • has unpredictable width for the columns (wired with prev)
  • looks bad on mobile at all
  • has some ‘deprecated’ hidden column for no reason
  • column headers live separately from the column values

what can I suggest:

  • it should be a grid presented as a pseudo-table, where the first line (header) just have different styling

what I expect from this element:

  • it should act as a real Excel table, with the quick options for sorting data (maybe without a collection reload)
  • I wanna control the width from the header but wanna be able to set the width based on content (including overflow hide/show and priority to the column on growth).
3 Likes

Keyboard controls

2 Likes

Sounds great!

What I would love for the table is an easier way to add functions by the users, things like:

  • Reorder rows and columns (A-Z, Z-A, 0-9, 9-0 etc.)
  • Add new row or column!!! :slight_smile:
  • Excel-like math functions (e.g. SUM, %, +/-/* etc.) for the user to customise their own tables

For the datagrid:

  • More options for a creative design (think moodboard mosaic). I tried to create my own patterns, but found it a bit too limiting. I was thinking I’d probably have to code it, but if you can create a better option that would be amazing!

This was the best result I could get with the datagrid:

But what I’d really love to have is something more like this, where the photos overlap in some places. Ideally also movable/resizable (I know that’s probably too much to ask for :sweat_smile:):

2 Likes

Would love to implement AG grid.

The ability to drag and drop our resort and filter are already built in. I think it’s a worthy investment.

8 Likes

The columns as a whole should be bindable so that we can dynamically show/hide/change them.

also min/max widths for individual column widths

AG grid would be :fire:

6 Likes

Same suggestion that I placed on the select/multiselect - exposing the variable value from the table so it can be directly worked with in terms of workflow sets and resets.

The ability to shift-click multiple rows: checking box 1, holding shift, clicking box 5 = selecting boxes 1-5.

I also get odd results in Datagrid when using a bindable formula for the placeholder text. It actually does’t appear - you have to click it first; which is confusing the end-user.

As I said before on the select/multiselect, I would recommend you to look at the quasar table vue component. It has a lot of interesting features to consider.

Make it mobile responsive please! It’s terrible on mobile

Also could we have built in sorting, where if you click the arrows on each column header it gets sorted.

When we show the ability to select multiple rows in table, could we also have access to the data of which rows are currently selected.

4 Likes

Would love to see a more excel-like experience with ability to add filters and sort on columns. Edit inline like the dynamic list is ideal.

1 Like

What are some of the things you’d like to see to improve the responsiveness?

1 Like

That would be a great idea, AG Grid is very incredible :fire: :fire:

1 Like

When will we see AG grid in the data grid component? Tons of people are desiring it. :slight_smile:

5 Likes

As for the AG grid itself, it’s a commercial project so it’s not so straightforward to just put it in a component.

The good news that the qualification for the new data grid is done and the development starts soon! We took in consideration all of your feedbacks, especially about how good the AG grid is so you will see many familiar settings and principles

7 Likes

+1 to add row option!

1 Like

Sorry for the late reply! But here’s the gist of the problem with the table on mobile

When we have multiple columns, currently we can only change the width of each column (esp on mobile view) according to “1”, “2”, “3”, “4” up till 10 I think… First, it is unclear what the total number is. Also, I wish it could be more granular - eg 6 is too wide and 5 is too narrow. It is hard to get the exact width I want. I hope that makes sense.

image

Also I wish there was an option where we can hide entire columns on mobile. I tried to do that but it didn’t seem to work. It disappears but the width it was taking is not distributed to the other columns.

You might want to use the new grid layout. You can even bind the layout to a variable :slight_smile:

Do you mean “datagrid”? I think that was the one I was using before “table”. Its even worst because i can’t even change the width of the columns haha