DataTable Column filter nested object

UI Components for Vue
Post Reply
Posts: 1
Joined: 03 Nov 2022, 20:46

03 Nov 2022, 21:08

Hi guys

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: "",
name: "firstname lastname",
office: {
id: 46,
office: 'officename',
{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']"
<Column header="Afdeling" filterField="department" :showFilterMenu="false" style="min-width:14rem">
<template #body="{data}">
<span class="label">{{}}</span>
<template #filter="{filterModel,filterCallback}">
<MultiSelect v-model="filterModel.value" @change="filterCallback()" :options="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>

Post Reply

Return to “PrimeVue”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests