TanStackT
TanStack•14mo ago•
1 reply
ltd-scarlet

Global filter nested data

Hey 👋,

I have that kind of data

const defaultData: Annonce[] = [
  ...json
  {
    id: '123',
    adresse: {
      code: '75001',
      city: 'Paris',
    }
  }


with this column def

columnHelper.accessor('adresse', {
  header: 'Adresse',
  cell: info => h(AnnonceAdresseCell, { adresse: info.getValue() })
}


This is my AnnonceAdresseCell component

<script setup lang="ts">
import type { Adresse } from '../types/annonce'

defineProps<{ adresse: Adresse }>()
</script>

<template>
  <div>
    {{ adresse.numero }} {{ adresse.rue }}
    <br />
    <div class="text-sm text-gray-500">
      {{ adresse.codePostal }} {{ adresse.ville }}
    </div>
  </div>
</template>


I have enabled global filtering on other columns but it does not work on this column. For example if I type "Paris", the table show no results.

Do you know how I can filter nested objects ?

Thank you 🙂
Was this page helpful?