I have an employee DataTable where i would like to use a column filter to filter the employees by a nested object (department).
I can filter that employees on their office, but i can't filter the employees on their department (nested object in the office object).
Hope you guys can help me!
The employees array with employee object looks something like this
const employees = [{
active: true,
band: {id: 5, band: 'AC5', description: 'Fuldmægtige med lavest anciennitet'},
id: 10,
mail: "amed@jm.dk",
name: "firstname lastname",
office: {
id: 46,
office: 'officename',
department:
{department: departmentname}
}
.....
]
const filters2 = ref({
'office': {value: null, matchMode: FilterMatchMode.IN},
'department': {value: null, matchMode: FilterMatchMode.IN},
});
const departmentoptions= ref([
{department: 'department1'},
{department: 'department2'},
{department: 'department3'},
]
<DataTable :value="employeeStore.employees" :paginator="true" class="p-datatable-customers" :rows="10"
dataKey="id" v-model:filters="filters2" filterDisplay="row" :loading="loading" responsiveLayout="scroll"
:globalFilterFields="['name', 'office.office_full', 'office.department.department_full']"
v-model:selection="selectedEmployees"
>
<Column header="Afdeling" filterField="department" :showFilterMenu="false" style="min-width:14rem">
<template #body="{data}">
<span class="label">{{data.office.department.department_full}}</span>
</template>
<template #filter="{filterModel,filterCallback}">
<MultiSelect v-model="filterModel.value" @change="filterCallback()"
ptions="departmentoptions" optionLabel="department" placeholder="Any" class="p-column-filter"><template #option="slotProps">
<div class="p-multiselect-office-option">
<span class="label">{{slotProps.option.department}}</span>
</div>
</template>
</MultiSelect>
</template>
</Column>
</DataTable>