Nuxt•5w ago

"No data" text in Table Component

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

Nuxt UI

A responsive table element to display data in rows and columns.

2 Replies

Hi @Joshua Gerke. 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>

<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)'

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>

<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: ----------------------

kapa.ai•5w ago

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

Gaming

Programming

"No data" text in Table Component

Did you find this page helpful?