Component Composition

[johnorford1]

Hi,

I have a nice (if complicated) custom filter working well with the data-table.

And now I am thinking about putting the filter-related things in their own component.

Could someone sketch a nice way to have the data-table and my new filter component compose / work together?

I have the ‘filter string’ and ‘filter method’ API from the data-table to work with.

Is there any clean way to do this?

Thanks!

[s.molinari]

You can just make your own component.

Scott

[johnorford1]

Yep.

I suppose I was fishing around for a discussion on various ways to get the components working together - must be a pretty common use-case.

My first try is to use Vuex as the middle-man between both components.

This means I can pretty much lift the filter related HTML & JS straight out of the original page and package it up as a component.

Perhaps there are better ways though.

[Shone]

Hi @johnorford1 Yes, you can create separate component and pack the filters there. We did the same thing (we have lots of pages that are using same filters). We created custom filters component and imported all the filters, than we are showing / hiding them depending on the page that users is on. We used Vuex to store filters state.

As you can see on the screen shoot we used right drawer for that.

[johnorford1]

I really like the right filter drawer, v nice.

Do you have one ‘filter-method’ for each page, or separate somehow?

[Shone]

Yes filters look great in the right drawer. We are using server-side pagination on data tables so each page has it’s own fetchData method.