How to disable selection input in <UTable>?

[heydayle]

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!

[thien0110]

I am also facing the same issue.

[madsh93]

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.

[heydayle]

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

[heydayle]

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.

[gilles6]

Is possible to disable this selection column and re-enable it from given condition?

[heydayle]

Is possible to disable this selection column and re-enable it from given condition?

Yes, we can

You just need to change the input condition in props disabled of <UCheckbox>

<template #select-data="{ row }">
   <UCheckbox
      v-model="row.isSelect"
      :disabled="yourCondition" // change your condition here!
      @change="selectRow(row)"
  />
 </template>