Nuxt•4mo ago

I want add text and icon in UTable when datas is empty

In the V2 version, I see EMpty-State but the V3 version does not see?

26 Replies

Hi @Buu. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- In Nuxt UI v3, the UTable component provides a slot named empty that you can use to customize the content displayed when there is no data. This allows you to add both text and an icon for the empty state. Here’s how you can use the empty slot in your template:

<template>
  <UTable :data="[]" class="flex-1">
    <template #empty>
      <div class="flex flex-col items-center justify-center py-8 text-muted">
        <UIcon name="i-lucide-inbox" class="mb-2 text-4xl" />
        <span>No data available</span>
      </div>
    </template>
  </UTable>
</template>

<template>
  <UTable :data="[]" class="flex-1">
    <template #empty>
      <div class="flex flex-col items-center justify-center py-8 text-muted">
        <UIcon name="i-lucide-inbox" class="mb-2 text-4xl" />
        <span>No data available</span>
      </div>
    </template>
  </UTable>
</template>

- The empty slot receives no props and is rendered when the data array is empty. - You can use any icon component (like UIcon from Nuxt UI) and your custom text inside this slot. This replaces the "Empty-State" feature from v2 and gives you full control over the empty state appearance in v3. For more details, see the UTable slots documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

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

BuuOP•4mo ago

@kapa.ai There is another way?

kapa.ai•4mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on the available knowledge sources, the recommended and documented way to customize the empty state in UTable (Nuxt UI v3) is by using the empty slot. There is no mention of an alternative built-in method (such as a dedicated "Empty-State" component or prop) in the v3 documentation. The empty slot is specifically provided for this purpose and is the approach shown in the official docs UTable Slots. If you need to display custom content (text, icon, etc.) when the table is empty, the empty slot is the supported and intended method. There is no information in the knowledge sources about another way to achieve this in Nuxt UI v3. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

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

BuuOP•4mo ago

@kapa.ai you can create Input color as image?

kapa.ai•4mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I'm sorry, but the knowledge sources do not contain information about creating an input color component that uses an image as the input in Nuxt UI or Nuxt UI Pro. The available documentation describes the UColorPicker component, which allows users to select a color using a standard color picker interface, but it does not mention using an image as the color input or picker background UColorPicker usage. If you are looking for a way to let users pick a color from an image (for example, clicking on an image to select a color), this feature is not documented in the provided sources. You may need to implement a custom solution for this functionality. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

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

BuuOP•4mo ago

@kapa.ai I want all buttons with type submit to have color attribute as primary by default, is that okay?

kapa.ai•4mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Yes, it is okay for all buttons with type="submit" to have the color attribute set to primary by default in Nuxt UI. In fact, the default color for the UButton component is already primary unless you override it. This means that if you do not specify a color, the button will use the primary color by default UTable Button Usage. If you want to enforce this behavior globally or customize it further, you can set the default color in your app configuration:

export default defineAppConfig({
  ui: {
    button: {
      defaultVariants: {
        color: 'primary'
      }
    }
  }
})

export default defineAppConfig({
  ui: {
    button: {
      defaultVariants: {
        color: 'primary'
      }
    }
  }
})

This ensures that all buttons—including those with type="submit"—will use the primary color unless a different color is explicitly set Button Theme. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

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

BuuOP•4mo ago

@kapa.ai only button with type submit

kapa.ai•4mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- The knowledge sources do not provide a built-in way in Nuxt UI to set the default color only for buttons with type="submit" globally. The documented configuration for default button variants (such as color) applies to all UButton components, regardless of their type attribute Button Theme. If you want only submit buttons to have color="primary" by default, you would need to set this prop manually on each submit button:

<UButton type="submit" color="primary">Submit</UButton>

<UButton type="submit" color="primary">Submit</UButton>

Or, you could create a custom wrapper/component for submit buttons that applies this prop. However, there is no official or automatic way to target only type="submit" buttons for default color in the current Nuxt UI configuration. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

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

BuuOP•4mo ago

@kapa.ai can be set in defineAppConfig?

kapa.ai•4mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- No, based on the knowledge sources, you cannot set a default color only for buttons with type="submit" using defineAppConfig. The defaultVariants configuration in defineAppConfig applies to all UButton components globally, not conditionally based on the type attribute Button Theme. There is no documented way to target only submit buttons for default color in the app config. You would need to set color="primary" manually on each submit button or create a custom component for this purpose. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

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

BuuOP•4mo ago

@kapa.ai compoundVariants?

kapa.ai•4mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- In Nuxt UI, the compoundVariants property is used in the theming system to apply specific classes or styles when a particular combination of variant values is active for a component. This allows you to define custom styling for complex scenarios that can't be handled by a single variant. For example, in the UButton theme configuration, you might see something like this:

compoundVariants: [
  {
    color: 'primary',
    variant: 'solid',
    class: 'text-inverted bg-primary hover:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary'
  },
  {
    color: 'primary',
    variant: 'outline',
    class: 'ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-primary'
  }
  // ...more combinations
]

compoundVariants: [
  {
    color: 'primary',
    variant: 'solid',
    class: 'text-inverted bg-primary hover:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary'
  },
  {
    color: 'primary',
    variant: 'outline',
    class: 'ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-primary'
  }
  // ...more combinations
]

This means:
- When both color is "primary" and variant is "solid", the specified class will be applied. - When color is "primary" and variant is "outline", a different class will be applied. Compound variants are a powerful way to fine-tune the appearance of components based on multiple variant values at once Button Theme. You can find similar usage for other components, such as Badge, Alert, and more, in their respective theme sections. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

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

BuuOP•4mo ago

@kapa.ai hi, Is there a Trable Tree in the UI?

kapa.ai•4mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I'm sorry, but the knowledge sources do not mention a "Table Tree" (a table with expandable/collapsible hierarchical rows, sometimes called a tree grid) as a built-in component in Nuxt UI. While Nuxt UI provides a UTable component for displaying tabular data and a separate UTree component for hierarchical data, there is no documentation indicating a combined "Table Tree" or tree grid feature UTable documentation UTree documentation. If you need tree-like expandable rows in a table, you may need to implement this functionality manually or look for third-party solutions. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

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

BuuOP•4mo ago

@kapa.ai bạn có thể giúp tôi custom không

kapa.ai•4mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Hiện tại, theo các tài liệu bạn cung cấp, Nuxt UI chưa có sẵn component "Table Tree" (bảng dạng cây, tree grid). Nuxt UI chỉ có hai component riêng biệt là UTable (bảng dữ liệu) và UTree (hiển thị dữ liệu phân cấp dạng cây), nhưng không có hướng dẫn hoặc ví dụ chính thức nào về việc kết hợp hai component này thành một bảng dạng cây (table tree) hoặc tree grid UTable documentation UTree documentation. Nếu bạn muốn custom một bảng dạng cây, bạn sẽ cần tự triển khai giải pháp của riêng mình, ví dụ như kết hợp các slot, hoặc xử lý dữ liệu và UI theo nhu cầu. Tuy nhiên, tài liệu hiện tại không cung cấp hướng dẫn chi tiết cho việc này, nên mình không thể cung cấp đoạn mã mẫu cụ thể dựa trên nguồn kiến thức hiện có. Nếu bạn cần hướng dẫn chi tiết hơn, bạn có thể mô tả rõ hơn về yêu cầu hoặc chức năng mong muốn, mình sẽ hỗ trợ trong phạm vi thông tin tài liệu cho phép. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

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

Gaming

Programming

I want add text and icon in UTable when datas is empty

Did you find this page helpful?