How to add a toolbar filter on Vue Admin Table

[aodihis]

Hello,
I have a module that show a data using VueAdminTable, I want to know if is it possible to add the toolbar something like status dropdwon in Elemenet index page to do a filtering?

If it is possible, is there any documentation that I can follow?

Thank you.

[Anubarak]

Unfortunately there is no good way to do this without a page-reload or a destruction of the component.
I required it too and ultimately ended up creating a custom package in order to include a way to customize filters and and custom criteria parameters

[nfourtythree]

Hi @aodihis

Yes, this is possible, there are actually examples of this in the Craft Commerce. For example the shipping categories index template

It uses the actions property on the VueAdmintTable class. You can find documentation on action buttons in the admin table asset.

There is also further information about buttons for creating a "New item" type button. You can enable a search toolbar for the table if you are retrieving data from an endpoint by settings the search property to true.

Hope this helps, thanks!

[nfourtythree]

Thank you for the feedback. Will take this internally and see what potential options we have for expanding the functionality. There definitely seems like there is something in this to make it more flexible and extensible.

Thanks!

[janhenckens]

I'd like to add my vote for extending this :) I've been using the VueAdminTable in a couple of my plugins and in projects at the office, it's been fun to work with and it makes the custom things we build feel even more integrated with the rest of the CP, so I'm all for adding features like filters and callbacks 👍 The fact that this has docs helps too off course :)

[nfourtythree]

To keep everyone up to date, I have created a PR to the Craft repo to add some new features to the Vue admin table that should hopefully give the extensibility required.

Here is the PR #13416 in which there are examples of what new features are being added.

Thanks!

[janhenckens]

Thanks for keeping us posted @nfourtythree ❤️!

[brandonkelly]

Craft 4.5.0 is out with those changes.