šŸ’¬ WeWeb team needs your feedback: Data Grid/Table

Announcements Product Research
,
23

No no, the whole new layout option, the ā€œgridā€ display. @jptrinh has made a tutorial about it on his youtube :slight_smile: itā€™s wayy better than the old columns layout

2 Likes
24

I need the ability to upload a image and display it. That would be great.

25

Not very sure if this is the right place but itā€™s about the CSS Grid. I tried to make a Table with CSS Grid but itā€™s very problematic. With CSS Grid, you can set the template of the table/grid using CSS, but the problem is;

Your Grid would look like this:

<grid>
  <header/>
  <header/>
  <header/>
  <header/>
  <row/>
  <row/>
  <row/>
  <row/>
</grid>

But you canā€™t do this with Weweb since you need data binding, which means your code would look like this:

<grid> --
  <!-- loop the items in the grid as parent element  -->
  {
    items.map(() => <child>)
  } 
</grid>

In React, this is achievable like this:

<grid>
  {
    items.map((item) => {
      return <React.Fragment>
        <header/>
      </React.Fragment>
    })
  }
  {
    items.map((item) => {
      return <React.Fragment>
        <row/>
      </React.Fragment>
    })
  }
</grid>

So TLDR; weā€™ll need something like React Fragment component to freely loop through anywhere. I believe this is also available in VueJS. Lemme know if I missed some points with Grid. Thanks

1 Like
26

@luka Whats the ETA on this new table component please?

27

Development start has been slightly postponed due to some ongoing work, but we expect it to start soon and last 2-3 weeks

1 Like
28

@luka or anyone else, in lieu of the above, what the best design approach to creaitng a table that will display data from Xano and will also allow the user to edit rows and add new rows too?

Do I store the Xano data in an array variable and when the user clicks ā€˜add rowā€™ I add am empty object to the array variable? And at some point I make a call to Xano to save the data, but when?

29

You will probably want to store any changes to a special array, letā€™s call it changesArray, where you want to store changes on any input changes or other events

You decide when do you want to use this array to send it back to XANO

Keep in mind that you will want to save row id and column name if youre editing a single cell to know which row and column to update

1 Like
30

Any update on this? I know you just had a huge release so donā€™t mean to be a pain, but I have a few big upgrades to do that will rely on more robust tables, and Iā€™m trying to figure out what my best path forward is

1 Like
31

The development is blocked by another feature that weā€™re working on. As it stands right now, it could be 2 months away before the release of the new table

3 Likes
32

thanks for your honesty! this is helpful information for me

33

Hello there, Luka,

I am new to WeWeb with a business case in mind.

I am looking for a ā€œXLSā€ like data grid where one can :

  • visually display Column 1-2-3 as Hierarchical columns: Grandparent-parent-childā€¦etc (Cascading)
  • go into edit mode, and inline update values, and save to backend
  • automatically recalculate other values in other columns - before saving
  • automatically recalculate row totals - before saving
  • give user option to display totals or averages on whatever column or hierarchy

Thatā€™s all :))
Regards,
Philippe

34

Any updates for when it will be released? @luka
I have to use a lot the data table, and i am thinking of creating a custom one, but if the updated table will be released maybe i wonā€™t have to.

35

The development should start after we release the new performance update which should go to QA next week. Iā€™m going to update in the thread as we start development and as soon as we have the first demo.

5 Likes
36

Great. Thanks!

37

Even more performance enhancements? :eyes:

38

I want the Data Grid to be able to perform calculations just like Excel.

39

I see replies here showing the table as if its adjustable columns. I do not have that.
Each column is fixed to its position, you can change the width and height but its position stays constant.
So if I make the first column shorter the next column doesnt move over. It stays exactly where it is.
is this a bug or am I missing something? I cant imagine there being many times I would want a table with each column being exactly the same width.

1 Like
40

This is not specific to data grid/table but general feedback on components: would love if the pre-made components used component variables instead of global!

This is mostly for tidiness - sometimes I add one just to see what it looks like and it spawns a folder of global variables that need to be cleaned up later.

This is not as bad in a small project but w/a longer term one, am already struggling to stay organized and find things.

41

Hey @luka just curious for planning purposes - what is the latest best guess for a release of this new Data Grid / Table ?? End of September? End of October?

42

@luka Data Grid / Table Wishlist:

1. Adjustable Column Width - allow user to drag and resize a columnā€™s width
2. Re-order Columns via Drag and Drop - allow user to re-order column order by dragging and dropping column header to their desired location
3. Add / Remove Columns - allow user to enable / disable columns via checkbox dropdown
4. Horizontally Scrollable Table - enable horizontal scrolling within the table to allow user to view all columns
5. Sortable Column Header - allow a user to sort a table by clicking on a column to choose between descending or ascending sort.
6. Filterable Column Header - allow a user to click on a column header and add filters