What are you trying to do? (please be as specific as possible and include relevant screenshots, code snippets, and reproduction steps)
I don’t like the looks and structure of the default component Table, but love the filter that comes with it.
What makes the filter great is the immediate reaction of the data to the filter input and search for matches (including partial matches) over multiple fields.
I would like to have my data organised in a collection of Collapsible components with a filter on top.
What have you tried so far? (please link relevant docs and other forum posts)
Studied the stand-alone filters in the Support Helpdesk ticketing system example, but none of them comes close to the one integrated into the Table component.
I have made some progress in creating the filter myself but I am experiencing difficulties with indexes.
Here is what I have done:
Created a variable called Msearch
Created an Input that would update Msearch variable with its content OnChange
Set visibility of Horizontal stack’s collection items to be defined by wether they contain the value of Msearch: $queries.allMs.data[cardIndex].m_name.includes($state.msearch)
My problem is that I can’t apply step 3 to the object I want. I have the following hierarchy of objects:
I want to hide the red Horizontal stack based on the value of the Msearch variable, but I can’t figure out what index to use in this case. Neither cardIndex nor currentIndex work → when I try to preview, the page loads with errors like cardIndex not defined or currentIndex not defined.
What index should I be using?
P.S. I added the green horizontal stack to try to apply the hiding rule to it. It works, but the result is predictable ugly with empty horizontal stacks littering the screen
Hi, I don’t think you can use cardIndex or currentIndex in the collections field, as they are not defined at that step. only once the collection is populated will you be able to use the indexes generated by the repeat element.
You can try the code that I use for my search filter in your Collection field (I’ve added your variables in the code)
const searchData = $queries.allMs.data;
const searchInput = $state.msearch;
const searchTerm = searchInput.toLowerCase();
const result = searchInput
? searchData.filter(result => result.m_name.toLowerCase().includes(searchTerm))
: searchData;
return result
This handles for empty input, when input is empty it will return the original array.
Hey @puvi it almost works. But somewhat inconsistently.
Here is how the old filter responded to input (correctly found all card with “Value” and the “Test metric” (old filter = the one applied on the visibility of the green Horizontal stack:
@alexander_eliseev also, when there’s no value in the input does it show all the result? And one more thing, did you remove the code in the visibility of the green Horizontal stack? cuz that wont be needed when you use the code I’ve provided. and that will cause it to behave in unintended ways.
I have indeed removed the collection for green items so it doesn’t interfere.
When I assign a value to Msearch variable in the PageData tab and then look at the preliminary results in the data picker, the results are as expected:
Here the value of Msearch is “Test”:
I will try reloading / copying the page / starting a new project or something else like it. Also hoping Plasmic team will take a look. Thanks a lot for your help so far @puvi
Hi, the issue is that you are using $queries.allCs.data[currentIndex].c_name to get the content of an item, but you should use currentItem, because as you are filtering data the currentIndex is not matching the ones from the fetched data. You can also rename currentItem to be more helpful in semantic terms.
