How to search in v-data-table by values from merged columns?

Question

I have this v-data-table:

<v-data-table
   v-model="selectedAssets" 
   :headers="headers"
   :items="assetList"
   :items-per-page="10"
   :search="search"
   :custom-filter="filterWithBarcodes"
   :dense="isDense"
   item-key="id"
   multi-sort
   show-select>

with 3 headers:

headers:[
            { text: 'Asset id', align: 'start', sortable: true, value: 'id'},
            { text: 'Name', sortable: true, value: 'name'},
            { text: 'Type', sortable: true, value: 'assetType'},
            etc...
        ],

How I can search in this table by merging values from two columns? I have to search by "barcode" which is "assetType-id" like. LAP-130. Searching works only for single column, when I type LAP or by id, but when I type LAP-130 it finds nothing.

Maybe something with custom-filter property?

Answer 1

I believe you can also supply a custom filter for each column:

      headers: [
        { text: "Asset id", align: "start", sortable: true, value: "id" },
        { text: "Name", sortable: true, value: "name" },
        {
          text: "Type",
          sortable: true,
          value: "assetType",
          filter: (value , search, item) => {
            if (!search) return true;
            return `${item.assetType}-${item.id}`.includes(search.toLowerCase())
          },
        },
      ],

Please note that this function will always be run even if search prop has not been provided. Thus you need to make sure to exit early with a value of true if filter should not be applied.