Vue Good Table filter a composite column

Question

I have a vue-good-table where I wanted to limit the columns a bit and made some composite columns, which consist of multiple properties of the row. The problem now is, the filterFn takes the column name to populate the data argument of the method. So I can only filter the one I decide to use as the column name. Is there a way to provide the whole row object to the filterFn like it is in the sortFn?

Template:

<template v-if="props.column.field === 'flags'">
    <div v-if="props.row.isGlobal">Global</div>
    <div v-if="props.row.isMobile">Mobile</div>
</template>

Column definition (I want to either show all rows where the Global or the Mobile flag is set):

{
    label: 'Flags',
    field: 'flags',
    sortable: false,
    filterOptions: {
        enabled: true,
        filterDropdownItems: ['Global', 'Mobile'],
        filterFn: this.flagFilter,
    },
},

Function (not working as data is undefined):

public flagFilter(data, filterString) {
    if ('Global' === filterString) {
        return data.isGlobal;
    } else if ('Mobile' === filterString) {
        return data.isMobile;
    }
    return true;
}

score 2 · Answer 1 · answered Nov 18 '19 at 15:20

As I don't think there's a way to get the whole row into the filter function you could map your rows in a computed property to the correct data structure

const vm = new Vue({
  el: "#app",
  name: "my-component",
  data: {
    columns: [{
      label: "Flags",
      field: "flags",
      sortable: false,
      filterOptions: {
        enabled: true,
        filterDropdownItems: ["Global", "Mobile"]
      }
    }],
    rows: [{
        isGlobal: true
      },
      {
        isMobile: true
      }
    ]
  },
  computed: {
    actualRows() {
      return this.rows.map((r) => {
        if (r.isMobile) {
          r.flags = "Mobile"
        }

        if (r.isGlobal) {
          r.flags = "Global"
        }
        return r
      })
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-good-table@2.17.3/dist/vue-good-table.js"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vue-good-table@2.17.3/dist/vue-good-table.css">

<div id="app">
  <vue-good-table :columns="columns" :rows="actualRows">
  </vue-good-table>
</div>

Good idea, though it interferes with Typescript, I can't just add a property to my object unless I define it in the interface, which is a bit ugly. But if there is no other way, I have to live with this workaround. — Thomas, Nov 18 '19 at 15:28

Vue Good Table filter a composite column

1 Answers1