Vuetify: [Feature Request] Mask data-table columns

[fabio-rsys]

Problem to solve

I didn't find any way of formatting a column value, like a date or a currency, in data table. If there is a solution for it, please help.

Proposed solution

I think that a great way of doing this is receiving a callback pointer on the headers prop, if it's defined it shall proccess every value of that collumn with the callback and print the masked value. This value need to be only visual, sorting should still use the original value.

[nekosaur]

use item.<name> slot. see examples in documentation

[fabio-rsys]

My data-table is dynamic, I can't know the property nor the filter it should use before-hand.

[nekosaur]

v-slot supports dynamic slot names

[fabio-rsys]

Nice! I'll try on my own and if I accomplish I'll post my solution, might help someone else. Thank you!

[mikbox74]

@nekosaur dynamic modifiers are not supported, aren't they? I have same issue and did not find any working solution yet.

P. S.: Eventually I made it using deprecated slot syntax.
_:slot=" 'item.' + columnName " slot-scope="props"_
instead of
_v-slot:item[columnName]="props"_.
Did not find any other ways to get it working.

[jacekkarczmarczyk]

@mikbox74 https://vuejs.org/v2/guide/components-slots.html#Dynamic-Slot-Names

[mikbox74]

@jacekkarczmarczyk try something like _v-slot:['item.'+value]_

[fabio-rsys]

I've solved it like this:

<template v-for="(h, index) in headers" v-slot:[`item.${h.value}`]="{ item }">
     <div v-if="h.type === 'date'" :key="index">
         {{ $moment(item[h.value]).format('DD/MM/YYYY') }}
   </div>
</template>

I just have to inform the type in the header array and put some logic inside the template to treat as I see fit.

[mvirkkunen]

I think having a formatting function would still be a good convenience feature. It can be done with slots, but doing it with a single reusable function would be much more convenient.