CODEWITHSUNDEEP
vue.jsvuejs2vuetify.jsvuetify-datatable
PyKKe
PyKKe

Reputation: 373

How can I achieve custom rendering when overriding Vuetify v-data-table scoped item slots?

<!-- DataTable.vue -->
<template>
  <v-card outlined>
    <v-data-table
      v-bind="$attrs"
      v-on="$listeners"
      dense
    >
      <template
        v-for="(_, name) in $scopedSlots"
        #[name]="slotData"
      >
        <slot
          :name="name"
          v-bind="slotData"
        ></slot>
      </template>
    </v-data-table>
  </v-card>
</template>

Let's say every time I have a null value I want a specific render, how can I achieve this goal? I'll write some code to help you better understand my question.

  <!-- Relevant code snippet -->
  <slot
    :name="name"
    v-bind="slotData"
  >
    <template v-if="slotData.value">
      {{ slotData.value }}
    </template>
    <template v-else>
      -
    </template>
  </slot>

Edit #1

To achieve my goal I had to cycle through headers instead of scoped slots.

<!-- DataTable.vue -->
<template>
  <v-card outlined>
    <v-data-table
      v-bind="$attrs"
      v-on="$listeners"
      dense
    >
      <template
        v-for="{ value } in $attrs.headers"
        #[`item.${value}`]="slotData"
      >
        <slot
          :name="`item.${value}`"
          v-bind="slotData"
        >
          <!-- Here we can add any custom rendering logic we want -->
          <template v-if="slotData.value">
            {{ slotData.value }}
          </template>
          <template v-else>
            -
          </template>
        </slot>
      </template>
    </v-data-table>
  </v-card>
</template>

While this solution works, there are a couple of things to point out:

  1. We are relying on slot names, which might be changed and break our logic.
  2. We must reimplement some defaults. For example, arrays are now rendered like this

enter image description here

and no more like this.

enter image description here

To prevent this behaviour, we must update our code.

<!-- Relevant code snippet -->
<slot
  :name="`item.${value}`"
  v-bind="slotData"
>
  <template v-if="!slotData.value">
    -
  </template>
  <template v-else-if="Array.isArray(slotData.value)">
    {{ slotData.value.join(', ') }}
  </template>
  <template v-else>
    {{ slotData.value }}
  </template>
</slot>

Edit #2

In Vuetify 3 each header has a value field which accepts functions too, therefore it's possible to do something like this

const headers = [
  {
    // other fields
    value: (item) => item.field ?? '-'
  }
]

Upvotes: 1

Views: 850

Answers (1)

cmfc31
cmfc31

Reputation: 1508

If all you want is to have some pre-configured props, instead of making a base data-table component. I would store my pre-config props as an object in a js file somewhere in my project, then I'd just import it and pass that object to the v-data-table with the v-bind property.

Kinda like what the correct answer did in this question: Add condition in vue attribute instead using v-if condition

Upvotes: 0

Related Questions