[Feature Request] Allow Defining VDataTable Header Item Value as Function

Problem to solve

Right now, the value property of the objects provided to the VDataTable header prop needs to be just a string, which are used like this:

(VDataTable.js - customFilter)

const props = headers.map(h => h.value)
return items.filter(item => props.some(prop => filter(getObjectValueByPath(item, prop, item[prop]), search)))

And similarly for the Sort direction.

The problem is that if, for example, your table is displaying some dynamic data (e.g. mapping from an ID to some other value for that column) then neither the sort or search will work, since the value isn’t what’s getting displayed.

Proposed solution

Allow defining the value property as a function.

For example, something like:

{
    text: 'User',
    value: (item) => `${item.firstName} ${item.lastName}`
}

Ideally that function could reference methods in the component it’s defined in - e.g. value: (item) => this.getNameForId(item.id)

[LaurentChion]

Hi,

I discover another workaround that could work inspire by actions example but I am not sure if it supposed to work like this.

{
    data() {
        // Define the column:
        headers: [{
           {
                text: 'Username',
                value: 'username'
            },
        }]
    },
   methods: {
        // Define the function to apply:
        getName(item) {
            return (item) => `${item.firstName} ${item.lastName}`
        },
    }
}

And in the template “override” the column

<v-data-table :headers="headers">
    ...
    <template v-slot:item.username="{ item }">
      {{ getName(item) }}
    </template>
</v-data-table>

PS: Thank you for this awesome library 😃

[augnustin]

I created a custom component <RenderableDataTable /> that extends the <v-data-table /> one and does this.

Usage:

<template>
  <RenderableDataTable :headers="headers" :items="items" />
</template>

<script>
export default {
  data() {
    return {
      headers: [{
        text: "Value",
        value: 'value',
        render(item) {
           return formatValue(item);
        }
      }]
    };
  }
}
</script>

RenderableDataTable.vue:

<template>
  <v-data-table
    v-bind="$attrs"
    v-on="$listeners"
    :headers="headers"
  >
    <template v-for="header in headersWithRender" v-slot:[`item.${header.value}`]="{item}">
      {{header.render(item, header)}}
    </template>

    <!-- Forward all other slots -->
    <template
      v-for="(_, slot) of $scopedSlots"
      v-slot:[slot]="scope"
    >
      <slot :name="slot" v-bind="scope"/>
    </template>

  </v-data-table>
</template>

<script>
  export default {
    computed: {
      headersWithRender() {
        return this.headers.filter(({render}) => render);
      },
    },
    props: {
      headers: {
        type: Array,
        required: true,
      },
    },
  }
</script>