When using the search element and no results are returned within a datagrid, how do we insert a message below the table header that says, “no records found”?
You can create your own message and put it underneath, with conditional display on?
1 Like
Thank you so much, @Broberto. Sounds simple enough and I will give your recommendation a try.
1 Like
@Broberto, I have been tinkering around with both ‘conditional rendering’ of a text element and binding the element with a formula. For datagrids, how do I know if there are zero records returned? I created a helper variable to capture this data point, but stumped on how to actually check if the search results = 0 rows.
Could you show me a screenshot of how your data that you’re binding into your datagrid looks like?
For example this is how you would do it if the data has a length parameter for example from a Supabase collection
Or for a simple array [ ] value you could do it like this
1 Like
I actually tried that, but the length of the fetched collection is the same value even after using a search value that returned zero results:
I am using the provided search element:
When I insert a search value that returns zero records, this is the result:
From here, I can use ‘conditional rendering’ of some text like, ‘no records found’, but I’m not sure how to query for the datagrid’s empty list found in ‘edit mode’:
While this is a simple obstacle, it’s been a great learning opportunity. So if you have any ideas, then I’m all ears!
I see now, you’re filtering your collection on WeWeb side yes? You’re not filtering it in Xano
Yes, that is correct. I implemented the following ready-made search element here: https://docs.weweb.io/add-elements/elements/search.html.
Would it be better to create a new (Xano) API endpoint that includes the search ‘value’ and returns the exact results? At this moment, I am just requesting or fetching the user table.
I can’t tell you about Xano, as I’ve used it like once and then left for Supabase, but what I would do in Supabase is:
- Get the collection and bind the filters to the value of my search
- Set Debounce on the text field and then on change trigger the fetch from Supabase based on the inputted text
- You get only the data that matches your criteria, thus you have the length matching your search result.
I’m unable to save the filtered value as a variable, and I’m unable to access the length of the WeWeb-side filtered collection. Maybe @Joyce could pull a trick of hers. But I’d go for the higher mentioned thing. I’m gonna try to make it work on WeWeb’s side, but I’m not sure this is even possible. So your best bet would be to go with the Backend (Xano in your case) filters.
You could do this with JavaScript on WeWeb side, but it would require some engineering I think.
Datagrid could definitely get some love in form of a Free Layout for the Empty Case like your.
1 Like
For anyone experiencing a similar issue, I joined the WeWeb office hours yesterday and was (quickly) provided with an (amazing) solution by @flo.
In short, the filter conditions must be applied directly on the collection rather than the datagrid.
Applying the filter on the datagrid will always return the full ‘length’ of the collection, but when filtering directly on the collection, a search will return the exact length of the query.
One cool best practice that I learned was the ability to bind the condition group and only apply (the conditions) if the search input field is populated (or true):
