Nuxt•7mo ago

Append to UTable header template slot

I want to add a textfield to certain columns of my table to be used as filters. For example, to filter the "title", "invNo", or "address" columns of my table. I have achieved this by creating custom <template #title-header="{column}">... slots. However, this completely removes the NuxtUI components, leaving me having to implement such things as sorting myself. Is there a way to only append to the default NuxtUI UTable slot, leaving the default functionality intact?

1 Reply

DesertCookieOP•7mo ago

Alright, here's my current, bad implementation: Add a special row to the data: rows.push({filterRow: true})
React to that row with a v-if in every data template slot:

<div v-if="row.filterRow">
    <UInput type="text" v-model="costumesStore.filters.title" placeholder="Filter title"/>
</div>
<div v-else> render regular data </div>

<div v-if="row.filterRow">
    <UInput type="text" v-model="costumesStore.filters.title" placeholder="Filter title"/>
</div>
<div v-else> render regular data </div>

This works, however, it makes the filter row move around when sorting.

Gaming

Programming

Append to UTable header template slot