Advice needed for additional table filter

[rconstantine]

Hey guys, I have a QTable where a few columns are displayed normally, and the normal filter method is used on them.

I also have a toggle button on the main row to display additional data in an expandable row below it. Those items are not used by the filter, it seems, because they aren’t on the column array. That makes sense.

The data for the expandable row comes from 4 additional columns (found in props.row), but they are each objects with a lot of data, which is why I didn’t want to include them in the main row. In other words, each row is displayed as a pair of rows, with the second hidden by default (because it is big) and shown with a toggle button located on the first.

I would like to add an additional filter for one sub-sub-element of one of the four objects in the second row(s) and I’m wondering what you guys think might be a good approach. To be more specific, the element I’d like to filter on is located in:

props.row.actions[index].arguments

I haven’t a clue how I can tie it in to the table’s existing filter functionality. Should I add it to the main row’s columns (so it would be duplicated in the main row), but hide it via the visible columns parameter? I’m not sure how to do that with an array (see how arguments is a child of array items? We can have multiple actions.)

Or is there a way I could add a second filter and reuse the table’s filter functionality somehow? Or should I create a getter to my Vuex store that reacts to the second filter? There may be other elements I want to filter on, but Arguments is going to be the most important. Has anyone done something similar, or do you have any ideas?

–
For those interested: I’m using schtasks.exe from Windows to fetch all scheduled tasks on a server, and display them in a nice-to-view way, and make them searchable. A lot of what we need to search for is in that arguments field(s). Finding the one job with such-and-such in it has been a huge pain in the butt over the years, so being able to search like this will be nice.

I may add a GUI for adding/modifying tasks as well. I haven’t decided yet. On the one hand, once you find the one you’re looking for, it isn’t too hard to go to the server and make the change. On the other hand, if you’ve found it in my app, why go somewhere else to make the change?

Or I might add an RDP client instead; node-rdpjs might work just fine. Or both. For this application, I’m adding to the admin side of things many tools that will make it a one-stop-shop for us to manage several servers with dozens of services and hundreds of tasks on each. The above is one piece of that goal.

Thanks for the help!

[qyloxe]

@rconstantine looks like you are just about to reinvent a wheel. I would consider some kind of client side query language. Below is a very useful library, because it allows to declare rich nested models, retrieve relational data and query those using javascript. The vuex reactivity is added bonus. This library flattens nested structures which is the main pain point in using them in components:

https://vuex-orm.github.io/vuex-orm/guide/prologue/what-is-vuex-orm.html#issue-with-nested-relational-data

[rconstantine]

I’ll check that out. Thanks. I haven’t heard of “client side query language[s]” before. Makes sense they’d exist.