T
TanStack•10mo ago
rival-black

Global filter nested data

Hey 👋, I have that kind of data 
const defaultData: Annonce[] = [
  ...json
  {
    id: '123',
    adresse: {
      code: '75001',
      city: 'Paris',
    }
  }
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() })
}
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>
<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 🙂
1 Reply
rival-black
rival-blackOP•10mo ago
The solution : make the first argument of the accessor function to be what you want to filter on. 
columnHelper.accessor(row => `${row.adresse.code} ${row.adresse.city}`, {
  header: 'Adresse',
  cell: info => h(AnnonceAdresseCell, { adresse: info.row.original.adresse })
}),
columnHelper.accessor(row => `${row.adresse.code} ${row.adresse.city}`, {
  header: 'Adresse',
  cell: info => h(AnnonceAdresseCell, { adresse: info.row.original.adresse })
}),
From the doc : "🧠 Remember, the accessed value is what is used to sort, filter, etc. so you'll want to make sure your accessor function returns a primitive value that can be manipulated in a meaningful way. If you return a non-primitive value like an object or array, you will need the appropriate filter/sort/grouping functions to manipulate them, or even supply your own! 😬" cf : https://tanstack.com/table/v8/docs/guide/column-defs#accessor-functions

Did you find this page helpful?