Nuxt•2mo ago

UTable not displaying data when using v-model:global-filter in Nuxt UI 4.1.0

Hi everyone, after updating to Nuxt UI 4.1.0 (released a few hours ago), I noticed an issue with the UTable component.
When I use v-model:global-filter="globalFilter", the data in the table does not render at all. If I remove the v-model:global-filter prop, the table displays the data correctly. Here’s a simplified example of the code I’m using: <UTable ref="table" :columns="columns" :data="items" v-model:global-filter="globalFilter" /> In script section I've set: const globalFilter = ref(""); Is this a known issue with the latest release, or is there a new usage pattern for the global-filter binding?
Any suggestions or workarounds would be greatly appreciated.
Thanks!

3 Replies

kapa.ai•2mo ago

Hi @Fabio Bolognesi. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the available knowledge sources, the usage pattern you described for v-model:global-filter with the UTable component is correct and matches the official documentation. The documented example shows:

<script setup lang="ts">
const globalFilter = ref('')
</script>

<template>
  <UInput v-model="globalFilter" class="max-w-sm" placeholder="Filter..." />
  <UTable ref="table" v-model:global-filter="globalFilter" :data="data" :columns="columns" />
</template>

<script setup lang="ts">
const globalFilter = ref('')
</script>

<template>
  <UInput v-model="globalFilter" class="max-w-sm" placeholder="Filter..." />
  <UTable ref="table" v-model:global-filter="globalFilter" :data="data" :columns="columns" />
</template>

This should allow the table to filter rows globally based on the input value. The documentation also states that you can use the global-filter prop to control the global filter state and bind it with v-model Docs > Components > Table > With row actions. However, there is no mention in the knowledge sources of a breaking change or a new usage pattern for v-model:global-filter in Nuxt UI 4.1.0. The sources do not document any known issue with the table not displaying data when this prop is used. Possible causes and suggestions: - There may be a regression or bug introduced in Nuxt UI 4.1.0 that is not yet documented. - Double-check that your columns and data are correctly defined and that the table works as expected without the global filter. - If the issue persists only after the update and only when using v-model:global-filter, it is likely a bug. Workaround:
As a temporary workaround, you can remove the v-model:global-filter binding to display the data, as you already discovered. Next steps:
Since the knowledge sources do not mention this issue, consider: - Checking the Nuxt UI GitHub issues for recent reports. - Reporting the bug with a minimal reproduction if it is not already tracked. I'm sorry, but the knowledge sources do not contain enough information about a new usage pattern or a fix for this issue in Nuxt UI 4.1.0. If you need further help, monitoring the official repository or community channels is recommended. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@931559042147557458> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Fabio BolognesiOP•2mo ago

Sorry guys, is someone having this same error?

Gaming

Programming

UTable not displaying data when using v-model:global-filter in Nuxt UI 4.1.0

Did you find this page helpful?