primeg tree table selection not working as expected

Question

I have a funny issue with tree table, when i use tree section, the selection is set to all table instead of selected row.

there is stackblitz project
https://stackblitz.com/edit/angular-primeng-table-toggle-4tmfyk?file=src%2Fapp%2Fapp.component.ts

Answer 1

The selection mode of tree table compares each node/row in the tree to the selected node and, if matching, selects that node. So in your stackblitz example, because you have three data nodes exactly matching the data {name: 'Desktop', size: '20mb', type: 'Folder'}, all three rows show as selected when any of the three is clicked.

One way to fix this would be to add a unique fourth field (index, parent or something else that is unique to each instance) to each data element. Then, even though the extra field is not visible in the tree table, it would render each node unique.

Note that for this solution, you would also need to either remove the 'dataKey' attribute from your element, as that limits the selection comparison to only the value of the 'name' field, or change 'dataKey' to be the unique field (e.g., index). So change:

<p-treeTable [value]="files2" [columns]="cols" selectionMode="single" [(selection)]="selectedNode1" dataKey="name">

to:

<p-treeTable [value]="files2" [columns]="cols" selectionMode="single" [(selection)]="selectedNode1" dataKey="index">

...and then modify your data tree nodes to include the index field:

myfiles: TreeNode[] = [
    { data: { name: 'Desktop', size: '20mb', type: 'Folder', index: 0 }},
    { data: { name: 'Cloud',   size: '20mb', type: 'Folder', index: 1 },
       children: [
         { data: { name: 'backup-1.zip', size: '10mb', type: 'Zip', index: 2 }},
         { data: { name: 'backup-2.zip', size: '10mb', type: 'Zip', index: 3 }},
       ]
    },
    { data: { name: 'Desktop', size: '20mb', type: 'Folder', index 4 },
       children: [
         { data: { name: 'backup-1.zip', size: '10mb', type: 'Zip', index: 5 }},
         { data: { name: 'backup-2.zip', size: '10mb', type: 'Zip', index: 6 }},
       ]
    },
    { data: { name: 'Desktop', size: '20mb', type: 'Folder', index: 7 }}
];

The 'index' field in my updated data tree gives the selection the uniqueness you are looking for.