Vue-Tables-2: How to pass a VueJS custom filter?

Question

How would one go about applying a VueJS filter (i.e. {{ price | currency }}) to data displayed using vue-tables-2?

I tried playing around with slots with one of the demo tables to no avail: https://jsfiddle.net/jfa5t4sm/11/

This is a bit annoying, as 'custom filters' mean different things in different context, so searching the docs is not bearing fruit.

Anyone have ideas?

Answer 1

Since it's a scoped slot you have to access the value through the props object and give it the correct slot name.

  <template slot="price" scope="props">
    <div>
      <p>{{ props.row.price | currency }}</p>
    </div>
  </template>

Working JsFiddle