How to apply Vuetify search in datatable when column data is also an array

Question

I have a Vuetify data table component with an array of items being showed. What happens is that this array of items, have another array inside that i use a template tag to iterate over the info and put this in just one column. See code below

<v-text-field
      v-model="searchManagers"
      append-icon="mdi-magnify"
      label="Pesquisar"
      single-line
      hide-details
    ></v-text-field>
  </v-card-title>
  <v-data-table
    :headers="headersManagers"
    :items="managers"
    :search="searchManagers"
    class="elevation-1"
  >
   //ATTENTION TO THIS PART HERE
    <template v-slot:item.departments="{item}">
      <p class="mt-2" v-for="(dpt, index) in item.departments" :key="index">{{dpt.name}}</p>
    </template>
    ----------------------------------------
    <template v-slot:item.status="{item}">
      <span v-if="item.status">
        <v-chip label outlined color="success">Ativo</v-chip>
      </span>
      <span v-else>
        <v-chip label outlined color="error">Inativo</v-chip>
      </span>
    </template>

    <template v-slot:item.action="{ item }">
      <v-btn fab small color="primary" text>
        <v-icon @click="editItem(item)">mdi-pencil-outline</v-icon>
      </v-btn>

      <v-btn fab small color="error" text>
        <v-icon @click="deleteItem(item)">mdi-delete-outline</v-icon>
      </v-btn>
    </template>
    <template v-slot:no-data>
      <v-alert class="mt-4" color="primary" dark :value="true">
        <v-icon x-large>mdi-emoticon-sad-outline</v-icon>
        <br />Nenhum Usuário encontrado
      </v-alert>
    </template>
  </v-data-table>

And here is my headers for this table

headersManagers: [
  { text: "Nome", align: "left", value: "fullName" },
  { text: "Nome de usuário", align: "center", value: "username" },
  { text: "Unidade", align: "center", value: "office" },
  { text: "Setor", align: "center", value: "departments" },
  { text: "Perfil", align: "center", value: "profile.name" },
  { text: "Status", align: "center", value: "status" },
  { text: "Ações", align: "center", value: "action", sortable: false }
],

What i want here, is that the search that is currently working for the name/username/office... fields, also works for the array of departments in the departments column. When I start to search for any department, it just simply doesn't return anything.

Example of the full json object i'm using

{
"id": "bf6dbc41-4eca-42c4-ab3b-e4ada4aa671b",
"firstName": "name",
"lastName": "last name",
"username": "a.user",
"fullName": "name last name",
"email": "[email protected]",
"photoUrl": "http://some_url.com",
"personalPhone": "9999",
"workPhone": "9999",
"admissionDate": "2012-05-02T00:00:00",
"office": "office",
"jobTitle": "example",
"departments": [
  {
    "departmentId": "04aa5418-b217-4bca-9cf3-f77725508980",
    "name": "department name",
    "director": "director name"
  },
  {
    "departmentId": "12602b8b-68ea-4539-b95e-01968c74247d",
    "name": "other department name",
    "director": "director name"
  }
],
"status": true,
"country": null,
"city": null,
"neighborhood": null,
"addressNumber": 0,
"street": null,
"postalCode": null,
"profile": {
  "id": "35631c5d-3269-4db9-98c8-e9896961e537",
  "name": "example"
},
"createdAt": "2020-07-06T17:44:05.024359",
"isManager": true,
"isDirector": false

},

How can i make this search work?

Sure, I edited the question with an example of the json object i'm displaying info on the table. I'm not displaying all the info, just what make sense to the view i'm working on. But I need to show the department names when the user has relationship with more than one dpt — Felipe Kosouski

Zim Zim · Accepted Answer · 2020-07-21T17:44:30

You can use a custom-filter like this...

 <v-data-table
    :headers="headers"
    :items="items"
    :search="search"
    :custom-filter="customSearch"
    class="elevation-1"
 >
    ...
 </v-data-table> 


 methods: {
      customSearch (value, search, item) {
          if (Array.isArray(value)) {
              return value.some(item=>Object.values(item).some(v=>v&&v.toString().toLowerCase().includes(search)))
          }
          return Object.values(item).some(v=>v&&v.toString().toLowerCase().includes(search))
      }
  },

Demo: https://codeply.com/p/ziCJy4J8rL

How to apply Vuetify search in datatable when column data is also an array

1 Answers