How to disable selection input in <UTable>?
heydayle opened this issue · comments
Description
Enviroment:
Node version:
v18.19.1
Nuxt version:
3.11.2
Nuxt UI version:
2.15.2
<script setup lang="ts">
const columns = [
{
key: 'name',
label: 'Name',
},
{
key: 'actions',
},
]
const people = [
{
id: 1,
name: 'Lindsay Walton',
},
{
id: 2,
name: 'Courtney Henry',
},
]
const selected = ref([])
</script>
<template>
<UTable v-model="selected" :rows="people" :columns="columns">
<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>
Currently, I'm using selection feature of in NuxtUI, but I don't know how to disable checkbox selection for a rows or all rows.
I learn about on Doc's NuxtUI but I don't see it's mention to this problem.
If anyone has a way to handle it, please share with me.
Thank you very much!
I am also facing the same issue.
You have to leave out the v-model part.
If you still want to use the functionality of being able to click a row, you can use the @click function.
EDIT: ups misread your question. But you could still do this without v-model and add your own col for a checkbox.
You have to leave out the v-model part.
If you still want to use the functionality of being able to click a row, you can use the @click function.
EDIT: ups misread your question. But you could still do this without v-model and add your own col for a checkbox.
Thanks @madsh93, i will try it.
I will update more info about problem in this ticket
I've tried customizing a selection column using <UCheckbox>
and everything seems to be working fine.
The next step is to add 2 properties, isSelect
and disabled
to each row.
You can check it out here: https://stackblitz.com/edit/nuxt-starter-bb3fnm?file=app.vue
I'll close this ticket here, thanks.