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

TanStack•16mo 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',
    }
  }

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>

Global filter nested data

Similar Threads

Global filter nested data

Similar Threads

Similar Threads

Similar Threads