TreeTable select all checkbox

[Hassanbhb]

Hello,
I was wondering if there is a way to do the select all checkbox I have done this,

<template>
      <TreeTable :value="data" selectionMode="checkbox" v-model:selectionKeys="selectedKey">
            <Column selectionMode="multiple" header="" expander>
                <template #header>
	                <Checkbox v-model="selectAll" binary @change="toggleSelectAll" />
                </template>
            </Column>
            <Column field="id" header="ID"></Column>
            <Column field="name" header="Product">
	            <template #body="{ node }">
		            <div class="flex items-center gap-2">
			            <img :src="imglink"
				            :alt="image" class="w-12 h-12 object-cover rounded" />
			            <div class="flex flex-col gap-1">
				            <span>{{ node.data.name }}</span>
				            <span class="text-xs text-gray-500">category</span>
			            </div>
		            </div>
	            </template>
            </Column>
            <Column field="reference" header="Reference"></Column>
            <Column field="corstPrice" header="Corst Price"></Column>
            <Column field="price" header="Price"></Column>
            <Column field="status" header="Status"></Column>
      </TreeTable>
</template>

<script setup>
const selectedKey = ref({});
const selectAll = ref(false);

// Function to get all node keys from the tree data
const getAllKeys = (nodes) => {
	let keys = {};
	
	const processNode = (node) => {
		keys[node.key] = true;
		if (node.children) {
			node.children.forEach(processNode);
		}
	};
	
	nodes.forEach(processNode);
	return keys;
};

// Toggle all selections
const toggleSelectAll = () => {
	if (selectAll.value) {
		selectedKey.value = getAllKeys(data);
	} else {
		selectedKey.value = {};
	}
};

// Watch selectedKey changes to update selectAll state
watch(selectedKey, (newValue) => {
	const totalKeys = Object.keys(getAllKeys(data)).length;
	const selectedCount = Object.keys(newValue).length;
	selectAll.value = selectedCount === totalKeys && selectedCount > 0;
}, { deep: true });
</script>

this seems to work, but it does not check the row checkboxes, instead it changes the rows color.
not sure if I am using this right, but would love a :addSelectAllCheckbox="true".