Filter and Sort

[wimble985]

Hello everyone, I want to use this platform to my buisness. It is very comfortable and usefull to me, and I need your help.

1. How i can add the button or something like that to sort my table with data? I know how to sort or filter the data when i add “Collections”, but how to do that in reall time)?
2. Is there the opportunity to do the filter in real time, not on the page with “Collections”.
   Thank you so much for this platform. I hope for an early answer)
   For example. I wanna to sort by abc format.
   
   

[flo]

Hi! I’m glad to see that weweb is useful to you!

Here is how you can add the sort button:

1. Add a flexbox element (div) in your title. Then add an icon in it, like this:
   

2. Select an icon, and update the style
   

   

3. Create a variable where you will save the state of your “sort”. For example sortByAddress, and set up the default value to “asc”
   
   

Then you have two solutions.

1. If you don’t have many data, let’s say hundreds of rows, then you can use what we call a front sorting: You sort the table without requesting new data to your backend.

   a. Select the content of your table and instead of binding it directly to the collection, bind it to a “sort” formula using your collection, the variable you just created and the field you wish to sort from. Like this
   

   b. Add a workflow to the sort icon to toggle the sort order, and use the “if” function. Like this
   

   
   
   

2. If you have many data, thousands of rows, then you need to “refetch” the collection from your backend to get the data with the new sorting configuration. Depending on the “datasource” you chose and the mode you used (static, dynamic & cached) it can be slightly different. the easiest way is to select cached mode and then bind the sort with the variable you created before. Like this
   

   

Tell me if that helped you and if you managed to get what wanted

[wimble985]

when i added varriable “sort” to my table, nothing happens. It writes me “ReferenceError: sort is not defined”. The varriable is the same like you, also the steps.
It is my record of my screen.

Vidyard - Sign In

[Joyce]

Hey there We’ll investigate asap!

Would you mind sending a public link to your screen recording?
Even after signing up to Vidyard, I’m unable to watch the video

[wimble985]

Николай Ковалёв's Library - Vidyard - 4 January 2022

It is a record of record sorry, right now i cant do another video of the problem(

[Joyce]

Haha no worries!

Instead of typing it, can you try selecting the “sort” function here:

[wimble985]

yeah, i know it, i tryed to do like your example, but the result didnot change(
there may be a problem in my data or I am adding information to the table incorrectly.

[Joyce]

Ok, it seems you don’t have a column with “Name” in your table.

Can you try adding “Last Name” as an argument instead of “Name”?

[wimble985]

Now varriable is working, but the data in the table doesnot refresh at all.
It doesnot refresh when I’m trying to do this step (1.a.) As i understand, it should be refreshed in real time, but the data disappears(
P.s. sorry for my language

[flo]

Did you select the “Data” button in the formula? (it needs to have the real list of objects)

[wimble985]

Yers, i did.

[Joyce]

Hi Nick

Would you mind sharing a link to the editor so we can take a hands on look for you?

It might be easier than asking you for screenshots

Don’t hesitate to DM the link if you don’t want to share your project in the forum.

[wimble985]

WeWeb Editor

This is my projekt

[Joyce]

Hi Nick!

Just had a look at your project and created a Google Sheet test page (a duplicate of your Google Sheet page) to try out the formula.

It’s working fine now. Here the formula you can copy in your Google Sheet page to make it work:

Feel free to delete the test page! I just left it there so you can see it’s working and because I didn’t want to mess with your original page

A couple of things you might find helpful:

• the formula is at the “Collection List level” because you want to sort items in that list
• when you hover on a formula name, a short explanation of how the formula works pops up

In the case of this sort formula, you can see:

• the first argument is the data from your collection, i.e. Example[‘data’]
• the second argument is how you want to order your sort, ascending or descending. In a previous step, you defined a sort variable so you want to add that variable as the “order” argument, in this case, we had called it sortByLastName
• the third argument is the name of the field you’re sorting in your collection, in this case, the column name is “Last Name”

Does it make more sense now?

[wimble985]

It works)
But what if i wanna add sort to other columns?
I tried to do the same things (add workflow to other icon and complement the formula), but nothing happens with new sort and also the old one was broken.

[Joyce]

Ah ok, got it!

In this case, you’ll need 2 variables:

1. one to change the sort from ascending to descending alphabetical order every time the user clicks on the sort icon
2. one to change the name of the field you’re sorting through depending on which sort icon the user clicked on

In your project, I’ve named these variables:

1. sortOrder
2. filterName

Both are string variables that are empty by default.

Since you have 2 variables you want to change when the user clicks on each sort icon, you’ll need 2 actions in the workflows that trigger when the user clicks on a sort icon:

1. the first action will change the filterName variable to match the field in your database that you want to filter
   

   

2. the second action will change the sortOrder variable each time the user clicks
   

   

In the screenshots, we’ve done this for the sort icon related to the “First Name” field. You would need to repeat the same action on each sort icon. The only thing that would change is the text you put in the first action.

Finally, you would change the formula on the Collection List:

• the array is still the collection data
• we want to sort it in ascending or descending order (changes every time the user clicks on the icon)
• by the field defined in the filterName variable (changes based on which icon the user clicks on)
  
  

If you’d like to check it out, I’ve set it up in the test page of your project

[wimble985]

Oh my God, thx so much. It is exactly what i’m looking for.
I’m trying to understand how to filter in real time? I know that it can be from Collections…(img.)

But what if i wanna do the Filter in real time?
For example - I wanna to filter my data by name or company name.

[wimble985]

Like this.
P.s. it is my “project”

[Joyce]

Great question!

The easiest way to do that is with a dropdown select menu element. We’ve taken it out of the toolkit for now because it had performance issues but it should be fixed and live again in the next few days.

Would it be ok for you if I sent you a tutorial towards the end of this week or early next week?

[wimble985]

It sounds perfect) will there be a detailed guide ?