Nuxt•2mo ago

put differente color to one row with Utable?

Its posssible paint/draw a row for example, with background in red for one row using componente UTable?

2 Replies

Hi @brocardjr. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, it's possible to apply different colors or styles to specific rows in the UTable component. According to the UTable documentation (https://ui.nuxt.com/components/table#columns), you can apply styles to tr elements by passing a class to rows. Here's an example of how you can achieve this:

<script setup lang="ts">
const items = [{
  id: 1,
  name: 'Apple',
  quantity: { value: 100, class: 'bg-green-500/50 dark:bg-green-400/50' }
}, {
  id: 2,
  name: 'Orange',
  quantity: { value: 0 },
  class: 'bg-red-500/50 dark:bg-red-400/50 animate-pulse'
}, {
  id: 3,
  name: 'Banana',
  quantity: { value: 30, class: 'bg-green-500/50 dark:bg-green-400/50' }
}, {
  id: 4,
  name: 'Mango',
  quantity: { value: 5, class: 'bg-green-500/50 dark:bg-green-400/50' }
}]

const columns = [
  { key: 'id', label: '#' },
  { key: 'name', label: 'Name' },
  { key: 'quantity', label: 'Quantity' }
]
</script>

<template>
  <UTable :rows="items" :columns="columns">
    <template #quantity-data="{ row }">
      {{ row.quantity.value }}
    </template>
  </UTable>
</template>

<script setup lang="ts">
const items = [{
  id: 1,
  name: 'Apple',
  quantity: { value: 100, class: 'bg-green-500/50 dark:bg-green-400/50' }
}, {
  id: 2,
  name: 'Orange',
  quantity: { value: 0 },
  class: 'bg-red-500/50 dark:bg-red-400/50 animate-pulse'
}, {
  id: 3,
  name: 'Banana',
  quantity: { value: 30, class: 'bg-green-500/50 dark:bg-green-400/50' }
}, {
  id: 4,
  name: 'Mango',
  quantity: { value: 5, class: 'bg-green-500/50 dark:bg-green-400/50' }
}]

const columns = [
  { key: 'id', label: '#' },
  { key: 'name', label: 'Name' },
  { key: 'quantity', label: 'Quantity' }
]
</script>

<template>
  <UTable :rows="items" :columns="columns">
    <template #quantity-data="{ row }">
      {{ row.quantity.value }}
    </template>
  </UTable>
</template>

In this example, the second row (Orange) has a red background applied using the class property: class: 'bg-red-500/50 dark:bg-red-400/50 animate-pulse'. This will give the row a red background in light mode and a slightly different shade in dark mode. You can customize the colors and styles as needed using Tailwind CSS classes or your own custom CSS classes. The class property on the row object allows you to apply these styles directly to the <tr> element of that specific row. UTable documentation (https://ui.nuxt.com/components/table#columns) provides more details on customizing the appearance of the table and its rows. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

Gaming

Programming

put differente color to one row with Utable?