epicmaxco / vuestic-ui

Vuestic UI is an open-source Vue 3 component library designed for rapid development, easy maintenance, and high accessibility. Maintained by Epicmax (@epicmaxco).
https://vuestic.dev
MIT License
3.47k stars 337 forks source link

Add multiple filters support #4300

Open jyotikad2809 opened 4 months ago

jyotikad2809 commented 4 months ago

Is your feature request related to a problem? Please describe. Yes so for example let us say that i have a table with 5 fields. For example id, name, age, company-name and country Now i want datatable to have filters such that each column should have filter.

Describe the solution you'd like

If I fill age as 22 and country as "Z" then i need to show all the rows which have age as 22 and country as z. Describe alternatives you've considered

Additional context

m0ksem commented 4 months ago

I think we can provide a composable for custom filtering.

const items = ref()

const filters = ref({
   col1: '',
   col2: '',
})

// or filters = ref('') // globally search

const filteredItems = useDataTableFilter(filters)

This way you can manually select which columns to filter and how you deal with filter fields (e.g. it can be input, select, checkbox, whatever).

This is going to be a better solution than using filter function inside data table + better for tree-shaking.