N
Nuxt•3d ago
perseverance

Selecting data in UTable without rendering checkboxes

I'm using UTable from nuxt/ui and I'm trying to highlight the selected row by using the v-model on it but the problem is it renders checkbox on each row. I tried using @select handler without using v-model but it doesn't work.
2 Replies
kapa.ai
kapa.ai•3d ago
Hi @perseverance. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To select data in UTable without rendering checkboxes, you can use the select event handler along with a custom implementation for highlighting the selected rows. Here's how you can achieve this: 1. Remove the v-model binding from the UTable component to prevent the automatic rendering of checkboxes. 2. Use the @select event handler to manage the selection state manually. 3. Implement a custom slot for the data cells to highlight the selected rows. Here's an example of how you can implement this: 
<script setup lang="ts">
const people = [
  // ... your data array
]

const selected = ref([])

function select(row) {
  const index = selected.value.findIndex(item => item.id === row.id)
  if (index === -1) {
    selected.value.push(row)
  } else {
    selected.value.splice(index, 1)
  }
}
</script>

<template>
  <UTable :rows="people" @select="select">
    <template #name-data="{ row }">
      <span :class="[selected.find(person => person.id === row.id) && 'text-primary-500 dark:text-primary-400']">
        {{ row.name }}
      </span>
    </template>
  </UTable>
</template>
<script setup lang="ts">
const people = [
  // ... your data array
]

const selected = ref([])

function select(row) {
  const index = selected.value.findIndex(item => item.id === row.id)
  if (index === -1) {
    selected.value.push(row)
  } else {
    selected.value.splice(index, 1)
  }
}
</script>

<template>
  <UTable :rows="people" @select="select">
    <template #name-data="{ row }">
      <span :class="[selected.find(person => person.id === row.id) && 'text-primary-500 dark:text-primary-400']">
        {{ row.name }}
      </span>
    </template>
  </UTable>
</template>
In this example: 1. We remove the v-model binding from the UTable component. 2. We use the @select event handler to manage the selection state manually. 3. We implement a custom slot for the name-data column to highlight the selected rows by changing the text color. This approach allows you to select rows and highlight them without rendering checkboxes. The selected rows will have their names displayed in a different color (primary-500 for light mode and primary-400 for dark mode). You can customize the highlighting style or extend this approach to other columns as needed. Table Component documentation provides more information on using slots and customizing the table appearance. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•3d ago
<@1002566732193464360> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?