[DataTable] How to implement Column wise filter for nested object ?

[premdasvm]

Hi,

I'm trying to add column filter to my data-table, but the data i'm showing is nested object, like

[
  {
    "id": 1,
    "name": "Leanne Graham",
    "username": "Bret",
    "address": {
      "city": "Gwenborough",
      "zipcode": "92998-3874"
    }
  },
  {
    "id": 2,
    "name": "Ervin Howell",
    "username": "Antonette",
    "address": {
      "city": "Wisokyburgh",
      "zipcode": "90566-7771"
    }
  }
]

<Column header="City" field="address.city" :showFilterMatchModes="false"
    :filterMenuStyle="{ width: '14rem' }" style="min-width: 14rem">
    <template #body="{ data }">
        <span style="margin-left: 0.5em; vertical-align: middle" class="image-text">
            {{ data.address.city }}
        </span>
    </template>
    <template #filter="{ filterModel }">
        <div class="mb-3 text-bold">Agent Picker</div>
        <MultiSelect v-model="filterModel.value" :options="filterData.city" placeholder="Any" optionLabel="name" class="p-column-filter">
            <template #option="slotProps">
                <div class="p-multiselect-representative-option">
                    <span style="margin-left: 0.5em; vertical-align: middle" class="image-text">
                        {{ slotProps.option.name }}
                    </span>
                </div>
            </template>
        </MultiSelect>
    </template>
</Column>

if i change my field="address.city" to field="city" the filter menu shows, but the filter does'nt work. when i set it back, the filter menu is not showing at all.

also console has this error

[tugcekucukoglu]

field property should be dynamic. Something like this:

<Column header="City" :field="address.city">

Am I missing something?

[iPOiZN]

what if I have two entities in the same array and they also need to be?

[
  {
    "id": 1,
    "name": "Leanne Graham",
    "username": "Bret",
    "address": {
      "first":{
        "city": "Gwenborough",
      "zipcode": "92998-3874"
      },
      "second":{
         "city": "Gwenborough2",
          "zipcode": "92998-3874"
      }
    }
  },
]

something like this

[zaid1523]

<Column header="City" :field="address.first.city">