fix(TreeTable): prevent selection when selectable is set to false (checkbox mode)

[KumJungMin]

Defect Fixes

• fix: TreeTable: Checkbox selectable does not work #6849

How To Resolve

Description

• When selectionMode is set to "checkbox",
• there is an issue where the checkbox gets selected, even if the selectable property is set to false.

<TreeTable 
	v-model:selectionKeys="selectedKey" 
	:value="nodes" 
	selectionMode="checkbox" // selectionMode is checkbox
	>  
    <Column field="name" header="Name" expander style="width: 34%"></Column>
    <Column field="size" header="Size" style="width: 33%"></Column>
    <Column field="type" header="Type" style="width: 33%"></Column>
</TreeTable>

• To resolve this issue, the checkbox is set to disabled when node.selectable is false.

// BodyCell.vue

<Checkbox
      v-if="checkboxSelectionMode && columnProp('expander')"
      :modelValue="checked"
      :binary="true"
      :class="cx('pcNodeCheckbox')"
      :disabled="node.selectable === false" // added
      ...
  >
...

Test

before: when node.selectable is false, but the checkbox is clickable

// data

[
  { key: '0', data: {…}, children: [{ key: '0-0', data, ...}, ... ], selectable: false }, 
  { key: '1', data: {…}, children: [ ... ], selectable: false }
]

before.mov

after: when node.selectable is false, but the checkbox is unclickable

// data

[
  { key: '0', data: {…}, children: [{ key: '0-0', data, ...}, ... ], selectable: false }, 
  { key: '1', data: {…}, children: [ ... ], selectable: false }
]

2024-11-25.9.28.22.mov

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

2 Skipped Deployments

Name	Status	Preview	Updated (UTC)
primevue	⬜️ Ignored (Inspect)	Visit Preview	Nov 25, 2024 1:35pm
primevue-v3	⬜️ Ignored (Inspect)	Visit Preview	Nov 25, 2024 1:35pm

[KumJungMin]

Question

• Currently, the checkbox click can be restricted for a single row, similar to single mode.
• If the intended behavior is to also restrict the checkbox click for child rows when the parent row is restricted,
• I will make additional modifications. Please provide your comments :)

---

current: restrict checkbox selection for rows with selectable set to false.

if you want: restrict checkbox selection for child elements of rows with selectable set to false.