DataTable Filter with Multiselect (with filter:true)

[DamManc]

Hello,
I can't filter my data on a column in a table. The filter is a Multiselect field that have a filter itself (because too many elements).

<MultiSelect
v-model="filterModel.value" :
options="sigleMarche"
optionLabel="name"
placeholder="Seleziona Marca" :
filter="true"
>
when I click "apply" on filter, it does not filter and returns an empty result.
sigleMarche = [
{name: 'GRIPMAX', label: 'GRIPMAX}',
.....
]
I need an help, thank you!

[martindavis]

Hi,
I think you should try binding the filters property of the DataTable to the selected value(s) of the MultiSelect. bloxd io

Here's an example of how you can achieve this:

Code: Select all

json
<template>
  <div>
    <MultiSelect v-model="selectedBrands" :options="brands" optionLabel="name" placeholder="Select Brands" :filter="true" />
    <DataTable :value="cars" :filters="filters">
      <Column field="brand" header="Brand"></Column>
      <Column field="model" header="Model"></Column>
      <Column field="year" header="Year"></Column>
    </DataTable>
  </div>
</template>

<script>
import { ref } from 'vue';
export default {
  data() {
    return {
      cars: [
        { brand: 'Toyota', model: 'Corolla', year: 2021 },
        { brand: 'Honda', model: 'Civic', year: 2022 },
        { brand: 'Ford', model: 'Mustang', year: 2020 },
        { brand: 'Toyota', model: 'Camry', year: 2021 },
        { brand: 'Honda', model: 'Accord', year: 2022 },
        { brand: 'Ford', model: 'F150', year: 2020 }
      ],
      brands: [
        { name: 'Toyota', label: 'Toyota' },
        { name: 'Honda', label: 'Honda' },
        { name: 'Ford', label: 'Ford' }
      ],
      selectedBrands: []
    }
  },
  computed: {
    filters() {
      if (this.selectedBrands.length) {
        return {
          brand: {
            value: this.selectedBrands.map(brand => brand.name),
            matchMode: 'in'
          }
        }
      } else {
        return {}
      }
    }
  }
}
</script>

In this example, I have a DataTable with three columns: "Brand", "Model", and "Year". We also have a MultiSelect component that lists the available brands. We bind the v-model of the MultiSelect to selectedBrands and the ptions prop to brands.

I then define a computed property called filters that returns an object with a filter for the "brand" column of the DataTable. If selectedBrands is not empty, we set the value of the "brand" filter to an array of the selected brand names, and set the matchMode to "in" to match any row where the "brand" column contains any of the selected brand names. If selectedBrands is empty, I return an empty object to clear any filters on the DataTable.

Finally, I bind the :filters prop of the DataTable to the filters computed property.

With this setup, selecting one or more brands in the MultiSelect should filter the DataTable to show only rows where the "brand" column matches any of the selected brand names.