"No data" text in Table Component

[atomic ridge]

Hey guys, how can i replace the text "No data" when the Table is empty? https://ui.nuxt.com/components/table

[coarse sage]

Hi @atomic ridge. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

To replace the "No data" text when a Nuxt UI Table component is empty, you can use the #empty slot. This slot allows you to customize the message displayed when there's no data in the table.

According to the documentation, the Table component provides several slots including one specifically for the empty state:

<template>
  <UTable :data="data" :columns="columns" class="flex-1">
    <template #empty>
      Your custom empty message here
    </template>
  </UTable>
</template>

This is confirmed in the slots documentation for the Table component, which lists the empty slot as one of the available slots.

The default styling for the empty slot is defined in the theme configuration as:

empty: 'py-6 text-center text-sm text-(--ui-text-muted)'

You can see this in the theme documentation for the Table component.

There's also an example in one of the knowledge sources showing a similar implementation in Russian:

<template #empty> Совпадения не найдены. </template>

This approach allows you to fully customize the empty state message to match your application's needs.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: